字体图标以及svg图片的使用vite和webpack
先说下字体图标的使用
首先去阿里巴巴矢量图标库，选择你需要的图标（可将svg图片自己上传）添加到项目里，可以生成在线链接，或者下载资源包到本地。
资源包形式：在项目里创建一个fonts文件夹，将下载的资源包中的文件复制过去
然后在main.js中引用， 假如是用下面说的两种办法的话 就光引用css就行，但是假如使用方法3的话，就需要引用js，有疑问不要急，往下看
import './assets/fonts/iconfont.css'
import './assets/fonts/iconfont'
- unicode 引用 不考虑 ，代码如下 用了不知道你写了个啥玩意，不讲了 谁想看 自己查查吧
3
- Font-class 引用
- Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
到这，字体图标的使用方法就结束了，但是会发现，其实他们的本质都是上传了个svg图片给图标库然后使用，那我们本来就有svg，可不可以直接来用呢
来我们看看第三种方式，毕竟表示是未来的主流，他有个属性，fill:currentColor，就是靠这个属性来变色，这个currentColor又是个啥，
这个currentColor关键字就像是一个CSS变量，不同的是它有一个主要的限制：你只可以在能够接受值的地方使用它；如果该属性不能接受值，它也就不能接受currentColor作为值。currentColor的值是由当前元素使用的color属性的计算值决定的。也就是说，currentColor的值和当前color属性的值是一样的。
然后，我就赶紧回项目里试了试能不能改变色，
失败了，是不是打开的方式不对，然后我找到了这个svg图片，点开了他，引入眼帘的是一串代码，
将红框值改成currentColor依然不好使
然后我把整个代码都复制了过去，
然后他变了，说明啥！当是img的时候是没有办法动态再修改svg的颜色了，也说明我们可以直接用svg来改了
但是问题又来了， 肯定不可能在项目里面这样用svg啊，有没有什么插件可以封装一下
vite版：
下载相关依赖
npm i fast-glob@3.x -D
npm i vite-plugin-svg-icons@2.x -D
在vite.config.js的 plugins里面配置，resolve函数需要从path模块里面引用一下
import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [resolve(process.cwd(), 'src/assets/imgs/svg')],// 指定symbolId格式symbolId: 'icon-[name]',// symbolId: 'icon-[dir]-[name]'})
封装组件
在main.js中注册
import 'virtual:svg-icons-register' // 引入注册脚本
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件
app.component('SvgIcon', SvgIcon)
使用，名字就是图片的名字
Webpack版
封装组件是一样的
下载的依赖不同，配置不同
npm i svg-sprite-loader --save-dev
创建一个文件夹，icons下面创建一个放置svg图片的文件夹svg和一个index.js
index.js中
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)main.js中添加
import SvgIcon from './components/svgIcon/index.vue'
import './assets/icons'app.component('SvgIcon', SvgIcon)
vue.config.js中添加
// 第一步：让其他svg loader不要对src/icons进行操作// 配置svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错.end() // 第二步：使用svg-sprite-loader对src/icons下的svg进行操作config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错.end().use('svg-sprite-loader').loader('svg-sprite-loader') // 定义规则使用时.options({symbolId: 'icon-[name]'}).end()
使用方法与vite相同
相关文章
未来必热：SVG Sprites技术介绍