[JavaScript知识库]在 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 组件

<template>
  <div class="icon-wrapper">
    <svg class="icon" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>

<script>
// 引入从iconfont 下载的symbox文件
import '@/assets/icons/iconfont-svg.js'
// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)

export default {
  name: 'Icon',
  props: {
    name: String,
    prefix: {
      type: String,
      default: 'icon-'
    }
  },
  computed: {
    iconName(){
      return `#${this.prefix}${this.name}`
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-wrapper {
  display: inline-block;
}
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在定义上面的 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 生成的文件

<template>
  <div id="app">
      <Icon name="Mouse-alt" class="icon1" />
      <Icon name="select_down" class="icon2" style="width:50px;height:50px;" />
      <Icon name="brush" class="icon3" />
  </div>
</template>

<style lang="scss">
.icon1 {
  width: 20px;
  height:20px;
  color: red;
}
.icon3{
  width:100px;
  height:100px;
  color: yellowgreen;
}
</style>

?效果：

五、可能遇到的问题

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

2、批量去色

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

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

?