vue中引入自定义icons(.svg)图标

创建SvgIcon组件

1. 在 components 文件夹下新建 SvgIcon 文件夹，并在 SvgIcon 文件夹下新建 index.vue 文件
   

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName">use>
    svg>
template>
 
<script>
    export default {
        name: 'Svg-icon',
        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'
                }
            },
            styleExternalIcon() {
                return {
                    mask: `url(${this.iconClass}) no-repeat 50% 50%`,
                    '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
                }
            }
        }
    }
script>
 
<style scoped>
    .svg-icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
style>

创建icons文件夹

2. 在 src 文件夹下新建 icons 文件夹，并在 icons 文件夹下新建 svg 文件夹和 index.js 文件。 svg 文件夹中用来存放各种扩展的.svg图标。
   
   

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

// register globally
Vue.component('svg-icon', SvgIcon)

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

在main.js中引入icons

3. import './icons'

下载插件

4. 在项目目录的终端，执行命令：

npm i svg-sprite-loader --save

5. 查看安装完成
   

配置

6. 在 build/webpack.base.conf.js 文件中新增如下语句
   

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options:{
          symbolId:'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude:[resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      
    ]
  },

使用

<svg-icon icon-class="user" />
<svg-icon icon-class="password" />