vue2中使用<svg-icon/>组件

在 Vue2 中使用 `<svg-icon/>` 组件，需要先安装 `svg-sprite-loader` 和 `svg4everybody` 依赖。

1. 安装依赖

   npm install svg-sprite-loader svg4everybody --save-dev

2. 创建 `svg` 文件夹，放置 `svg` 图标文件

3. 在 `vue.config.js` 文件中配置 `svg-sprite-loader`

   module.exports = {
     chainWebpack: config => {
       const svgRule = config.module.rule('svg');
   
       // 清除已有的所有 loader。
       // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
       svgRule.uses.clear();
   
       // 添加要使用的 loader
       svgRule
         .use('svg-sprite-loader')
         .loader('svg-sprite-loader')
         .options({
           symbolId: 'icon-[name]'
         });
     }
   };

4. 创建 `SvgIcon.vue` 组件

   <template>
     <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
       <use :xlink:href="iconName" />
     </svg>
   </template>
   
   <script>
   export default {
     name: 'SvgIcon',
     props: {
       iconClass: {
         type: String,
         required: true
       },
       className: {
         type: String,
         default: ''
       }
     },
     computed: {
       iconName() {
         return `#icon-${this.iconClass}`;
       },
       svgClass() {
         if (this.className) {
           return 'svg-icon ' + this.className;
         } else {
           return 'svg-icon';
         }
       }
     }
   };
   </script>
   
   <style scoped>
   .svg-icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>

5. 在组件中使用 `<svg-icon/>`

   <template>
     <div>
       <svg-icon icon-class="xxx" />
     </div>
   </template>
   
   <script>
   import SvgIcon from '@/components/SvgIcon';
   
   export default {
     name: 'Example',
     components: {
       SvgIcon
     }
   };
   </script>