就是我们页面上看到的那些菜单上面的小图标

如何在一个新项目中使用svg-icon组件呢? 下面来说一下步骤

使用步骤:

1.安装依赖:

npm i svg-sprite-loader@4.1.3

2.配置 在 vue.config.js 中

配置1

  1. const path = require('path')
  2. function resolve (dir) {
  3.   return path.join(__dirname, dir)
  4. }

配置2

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

3.复制以及创建文件

(1) src/icons 把icons文件夹复制粘贴在src下面

说明一下: icons/svg icons下面的svg 是保存图标的

icons/index.js icons 下面的index.js 值注册全局组件的

(2)components/SvgIcon/index.vue 把整个SvgIcon文件夹都放在

components下面

(3) validate.js

方式1: utils/validate.js 把validate.js这个js文件放在utile下面

方式2: 如果不想把整个文件夹都放进来,那么就可以把有一段校验规则放在

SvgIcon/index.vue下面

  1.                   ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624426914921-0341dda6-62af-40bb-bf8a-03362b89b9e9.png#clientId=u66378cc5-3985-4&from=paste&height=82&id=u1cc5bb56&margin=%5Bobject%20Object%5D&name=image.png&originHeight=82&originWidth=384&originalType=binary&ratio=1&size=6486&status=done&style=none&taskId=ue31d79ce-df4a-4d0a-ad12-1a2cb1b5c42&width=384)

(4) 在main.js里面引入

  1. import '@/icons'

(5) 使用

  1. 使用格式: <svg-icon icon-class="文件名"/>  这里的文件名就是src/icons/svg下的文件名