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

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

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

1. 创建结构文件

src/components/SvgIcon/index.vue // 图标组件文件

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]'
             }
           }
         }
       ]
     }
   }
   

   最后就可以在其他组件中愉快的使用了：