在一个新项目中使用svg-icon组件的步骤

1. 首先要安装依赖

npm i [email protected]
           

2. 在vue.config.js中补充一个配置

chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
           

3.创建文件src/icons

* @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
           

src/icons
-       /svg       # 保存图标
-       /index.js  # 注册全局组件
           

• index.js中的代码

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
// 注册成全局组件
Vue.component('svg-icon', SvgIcon)
// 自动关机加载所有的./svg目录下的图片文件 ,之后可以直接使用文件名
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
           

• 创建文件  componets/SvgIcon/index.vue(组件)
• 创建文件  utils/validate.js (上边的组件中用到了其中的验证规则)

* @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
           

4. 在main.js中引入

import '@/icons'
           

5. 使用

使用格式 : <svg-icon icon-class="文件名"/>

文件名就是src/icons/svg下的文件名

6.一个学习网站 , 一个阿里巴巴矢量图标库

SVG教程

阿里巴巴矢量图标库   可以直接搜索相关的svg图标 , 找到后下载或者复制代码