vuecli3的svgicon_vue-cli3项目中集成svg组件

前言

vue-cli3 项目的搭建不做赘述。

很多人都在自己的项目中使用过svg，而使用的形式一般如下：

1、在 img 标签中使用

2、直接吧svg代码贴到html中

对于方法一，需要下载文件，引用时候需要写上长长的引用地址。

对于方法二，到时可以直接把svg复制过来就是用，但是这长长的代码，看着就让人揪心。

解决方案

1、首先，我们需要的svg资源来源，这里推荐 阿里巴巴矢量图标库。我们可以很方便的下载，或者复制svg

2 、在项目中封装svg调用组件

(1) 安装  svg-sprite-loader

npm install svg-sprite-loader --save

(2)在components公共组件文件夹下创建SvgIcon，并在SvgIcon目录下创建 index.vue

index.vue

>

name:'SvgIcon',

props: {

iconClass: {

type:String,

require:true},

className: {

type:String,

default:''}

},

computed: {

iconName() {

return `#icon-${this.iconClass}`;

},

svgClass() {

if (this.className) {

return `svg-icon ${this.className};`

} else {

return'svg-icon';

}

}

}

}

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

(3) 在src目录下创建 icons 目录， 在 icons 目录下创建 index.js 文件和 svg 文件夹(用于放svg文件)

index.js

import Vue from 'vue';

import SvgIcon from'@/components/SvgIcon';//注册全局组件

Vue.component('svg-icon', SvgIcon);

const req= require.context('./svg', false, /.svg$/);

const requireAll= requireContext =>requireContext.keys().map(requireContext);

requireAll(req);

(4)在main.js 引入 icons/index.js

import './icons'

(5) 在vue.config.js 中加入 svg-sprite-loader 配置

const path = require('path')functionresolve(dir) {

return path.join(__dirname, dir);

}module.exports ={

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()

}

}

使用

svg文件可以在上边说的 阿里巴巴矢量图标库

1、下载svg文件

2、复制svg 然后在icons/svg 目录下创建svg文件，然后把复制的svg粘贴进去(推荐)