html js使用svg图标,Vue项目中使用svg图标

1,安装依赖

Vue项目的运行少不了安装依赖，使用svg同样。

npm install svg-sprite-loader --save-dev

2,配置

项目中找到build文件夹中的webpack.base.conf.js

在module.rules里添加下面画红线的代码

image.png

3,在src/components目录下添加SvgIcon文件夹,接着在文件夹内创建index.vue,内容如下

// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage

import { isExternal } from '@/utils/validate'

export default {

name: 'SvgIcon',

props: {

iconClass: {

type: String,

required: true

},

className: {

type: String,

default: ''

}

},

computed: {

isExternal() {

return isExternal(this.iconClass)

},

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%`

}

}

}

}

.svg-icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

.svg-external-icon {

background-color: currentColor;

mask-size: cover!important;

display: inline-block;

}

4,在src目录中依次创建icons文件夹,svg文件夹(用来存放下载的svg文件),index.js内容如下

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)

5,引入

在main.js中引入svg

import './icons'

6,使用

image.png