环境：

  • vue-cli 3.0
  • vue @2.x

安装插件 svg-sprite-loader

  1. $ npm i svg-sprite-loader -D

webpack配置

在根目录的vue.config.js里添加如下代码：

  1. module.exports = {
  2.   chainWebpack(config) {
  3.     // set svg-sprite-loader
  4.     config.module
  5.       .rule('svg')
  6.       .exclude.add(resolve('src/icons'))
  7.       .end();
  8.     config.module
  9.       .rule('icons')
  10.       .test(/\.svg$/)
  11.       .include.add(resolve('src/icons'))
  12.       .end()
  13.       .use('svg-sprite-loader')
  14.       .loader('svg-sprite-loader')
  15.       .options({ symbolId: 'icon-[name]' })
  16.       .end();
  17.   },
  18. };

在创建svgIcon组件

在src/components下创建组件SvgIcon/index.vue，组件内容如下：

  1. <template>
  2.   <div
  3.     :style="styleExternalIcon"
  4.     class="svg-external-icon svg-icon"
  5.     v-if="isExternal"
  6.     v-on="$listeners"
  7.   />
  8.   <svg :class="svgClass" aria-hidden="true" v-else v-on="$listeners">
  9.     <use :xlink:href="iconName" />
  10.   </svg>
  11. </template>
  13. <script>
  14. import { isExternal } from '@/util/validate';
  16. export default {
  17.   name: 'SvgIcon',
  18.   props: {
  19.     iconClass: {
  20.       type: String,
  21.       required: true,
  22.     },
  23.     className: {
  24.       type: String,
  25.       default: '',
  26.     },
  27.   },
  28.   computed: {
  29.     isExternal() {
  30.       return isExternal(this.iconClass);
  31.     },
  32.     iconName() {
  33.       return `#icon-${this.iconClass}`;
  34.     },
  35.     svgClass() {
  36.       if (this.className) {
  37.         return 'svg-icon ' + this.className;
  38.       } else {
  39.         return 'svg-icon';
  40.       }
  41.     },
  42.     styleExternalIcon() {
  43.       return {
  44.         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
  45.         '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
  46.       };
  47.     },
  48.   },
  49. };
  50. </script>
  52. <style scoped>
  53. .svg-icon {
  54.   width: 1em;
  55.   height: 1em;
  56.   vertical-align: -0.15em;
  57.   fill: currentColor;
  58.   overflow: hidden;
  59. }
  61. .svg-external-icon {
  62.   background-color: currentColor;
  63.   mask-size: cover !important;
  64.   display: inline-block;
  65. }
  66. </style>

这里还缺一个validate.js，创建文件src/util/validate.js

  1. export function isExternal(path) {
  2.   return /^(https?:|mailto:|tel:)/.test(path);
  3. }

创建icons目录

在src下创建icons目录，目录结构如下：

  1. icons
  2.     |_ svg
  3.         |_ xxx.svg
  4.     |_ index.js
  5.     |_ svgo.yml

index.js的内容：

  1. import Vue from 'vue';
  2. import SvgIcon from '@/components/Common/SvgIcon/index.vue'; // svg component
  4. // register globally
  5. Vue.component('svg-icon', SvgIcon);
  7. const req = require.context('./svg', false, /\.svg$/);
  8. const requireAll = requireContext => requireContext.keys().map(requireContext);
  9. requireAll(req);

svgo.yml的内容：

  1. # replace default config
  3. # multipass: true
  4. # full: true
  6. plugins:
  8.   # - name
  9.   #
  10.   # or:
  11.   # - name: false
  12.   # - name: true
  13.   #
  14.   # or:
  15.   # - name:
  16.   #     param1: 1
  17.   #     param2: 2
  19. - removeAttrs:
  20.     attrs:
  21.       - 'fill'
  22.       - 'fill-rule'

在main.js里导入icons

  1. import './icons'; // icon

使用svg-icon

  1. <svg-icon icon-class="count" class-name="my-icon" />
  • icon-class 是图标的文件名
  • class-name 是自定义的class名

注：修改了vue.config.js要重新运行项目才有效