1.首先安裝
npm install --save-dev svg-sprite-loader
- 在webpack.base.conf.js中手動(dòng)添加
module: {
{
test: /.svg/,
loader: ‘url-loader‘,
exclude: [resolve(‘src/icons‘)],
options: {
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
}
},
}
- 在src/components下新增一個(gè)文件夾 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
}
},
computed: {
iconName() {
return #icon-${this.iconClass}
},
svgClass() {
if (this.className) {
return ‘svg-icon ‘ + this.className
} else {
return ‘svg-icon‘
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 在src下新增文件夾icons/svg存放svg圖
icons/index.js代碼如下:
import Vue from ‘vue‘
import SvgIcon from ‘@/components/SvgIcon‘// svg組件
// register globally
Vue.component(‘svg-icon‘, SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(‘./svg‘, false, /.svg$/)
requireAll(req)
- 在main.js中引入:
import ‘@/icons‘ // icon
- 重新
npm run dev
- vue的文件中就可以用啦!! 界面使用 如:
<svg-icon icon-class="userName" /> //userName是svg圖的命名
