vue项目中svg图标的自动化使用

首先，这是一篇摘抄笔记，具体使用原理等更详细的内容，请参考原作者的 手摸手，带你优雅的使用 icon 。

想要更优雅（偷懒）的在项目中使用svg图标，肯定能想到的就是封装组件，但是光封装组件是不行滴，你还需要:

1. 创建结构文件

src/components/SvgIcon/index.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>

src/icons/index.js // 处理svg文件夹中svg图标，并在Vue上注册全局组件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

src/icons/svg // svg图标文件存放文件夹，所有下载的svg图标全部放在这个文件中

2. 使用 svg-sprite并配置config文件

   npm install svg-sprite-loader -D
   # via yarn
   yarn add svg-sprite-loader -D
   

   配置webpack.base.conf.js中的规则

   {
    ...其他代码省略
    module: {
       rules: [
         ...其他代码省略
         { // 这个花括号中都是新增的规则
           test: /\.svg$/,
           loader: 'svg-sprite-loader',
           include: [path.resolve(__dirname, "../src/icons")], // 确保这个路径正确
           options: {
             symbolId: 'icon-[name]'
           }
         },
         { // 这个规则中新增了exclude这一行
           test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
           exclude: [path.resolve(__dirname, "../src/icons")], // 确保这个路径正确
           use: {
             loader: 'url-loader',
             query: {
               limit: 10000,
               name: 'imgs/[name]--[folder].[ext]'
             }
           }
         }
       ]
     }
   }
   

   最后就可以在其他组件中愉快的使用了：<svg-icon icon-class="star"/>