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" />