在 Vue 中使用 svg

在vue中使用 svg 有两种方式：

1、使用本地的svg

2、把本地的 svg 上传到 iconfont中，统一去色生成 symbol 格式的文件引入

一、要使用 svg 先安装对应的 loader

npm install svg-sprite-loader

然后在 vue.config.js 里面对 .svg 结尾的文件使用对应的 loader

module.exports = {
    /* svg 相关配置 */
    chainWebpack: config => {
        const svgRule = config.module.rule('svg');
        // 清空默认svg规则
        svgRule.uses.clear();
        //针对svg文件添加svg-sprite-loader规则
        svgRule
            .test( /\.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            });
    }
}

二、封装 svg 组件

在定义上面的 Icon 组件的时候，就已经把本地的 svg 文件和在iconfont 图标库里面生成的symbol 格式的 svg 全部引入了，好处是关于 svg 的资源全部在这个文件中引入，不必分散开来写

三、再将上面的 Icon 组件注册为全局组件

先将组件引入注册

import Vue from 'vue'

const Icon = () => import('./Icon')

const components = {
  Icon
}

Object.keys(components).forEach(item => {
  Vue.component(item, components[item])
})

在main.js 加载上面的文件

import Vue from 'vue'
import App from './App.vue'

import '@/components'


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

 文件结构为：

 四、使用方法

根据上面结构，icon1 , icon2 是本地的，icon3 是 iconfont 生成的文件

 效果：

五、可能遇到的问题

1、当使用本地 svg 时，改变颜色不生效，可以找到对应的文件把里面的 fill 属性删除

2、批量去色

当我们有大批本地文件时，如何进行批量去色，可以把文件上传到 iconfont 图标库，在提交时选择去除颜色并提交即可，然后添加到项目。如果从图标库获取到的图标可以选择批量操作，然后选择批量去色，最后生成 symbol 文件引入即可

引入方式参考官方帮助：iconfont-阿里巴巴矢量图标库 中的 symbol 引用