1、在vuecli的src下創建icons文件夾,子目錄svg,用於存放阿里的.svg圖標文件
package.json中安裝: svg-sprite-loader
2.svg 目錄主要用於存放 svg 文件,來看一下 index.js 的內容,功能就是把組件註冊到全局,方便使用:
在src/icons/index.js中使用webpack的require.context自動引入src/icons下面所有的圖標。
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg組件
// register globally,把SvgIcon組件註冊爲名爲svg-icon的全局組件
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext);
/**
* 使用webpack的require.context自動引入src/icons下面所有的圖標。
*
* require.context(directory,useSubdirectories,regExp)
* require.context():需要一次性的引入某個文件夾下的所有文件
形參:
directory:需要引入文件的目錄
useSubdirectories:是否查找該目錄下的子級目錄
regExp:匹配引入文件的正則表達式
*/
const req = require.context('./svg', false, /\.svg$/);
// requireAll(req)
export default {
allSvg: requireAll(req)
}
3、在 src/components/ 下創建 SvgIcon 組件
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: "SvgIcon",
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";
}
}
}
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4、在main.js中引入
import '@/icons';//引入svg模板
5、在組件中如何使用:
1) 這裏就會使用 src/icons/svg/example.svg 文件。
<svg-icon icon-class="example"></svg-icon>
2) 批量展示效果,可用於配置系統圖標
<template>
<div>
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" v-for="(v,index) in svgList" :key="index">
<div @click="show(v)" style="padding-bottom:8px;text-align: center">
<svg-icon :icon-class="v"></svg-icon>
<div>
{{v}}
</div>
</div>
</el-col>
</el-row>
<hr>
<h3>單獨使用,在src/icons/index.js中已經把Svgicon註冊爲全局組件,可以直接使用</h3>
<svg-icon icon-class="督導審覈"></svg-icon>
<br>
<p>選擇展示區域</p>
<svg-icon v-for="(x,index) in selectedSvg" :icon-class="x" :key="index"></svg-icon>
</div>
</template>
<script>
import svgList from "@/icons/index"
export default {
name: "svgStu",
data() {
return {
svgList: [],
selectedSvg: []
}
},
mounted() {
console.log(svgList)
for (var i = 0; i < svgList.allSvg.length; i++) {
let id = svgList.allSvg[i].default.id.replace('icon-', '');
this.svgList.push(id)
}
},
methods: {
show(event) {
this.$message.success('選擇了' + event);
this.selectedSvg.push(event)
}
}
}
</script>
<style scoped>
h3 {
text-align: center;
}
</style>
6、接下來是最重要的一步
首先需要注意的是,通過 vue-cli3 構建的項目可以初始化進行很多選擇,我構建的目錄更多的是以 *.config.js 的形式存在的。
在根目錄下創建一個名爲 vue.config.js 文件,接下來的操作都和它有關,先來看一下它完整的代碼:
const path = require('path')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(args => {
const argv = process.argv
const icourt = argv[argv.indexOf('--icourt-mode') + 1]
args[0]['process.env'].MODE = `"${icourt}"`
return args
})
// svg rule loader
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不這樣做會添加在此loader之後
svgRule.exclude.add(/node_modules/) // 正則匹配排除node_modules目錄
svgRule // 添加svg新的loader處理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg處理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
},
configureWebpack: {
devServer: {
open: true,
// https: true,
proxy: {
'/user': {
target: 'https://devadminschool.icourt.cc',
},
'/live': {
target: 'https://devadminschool.icourt.cc',
},
},
},
},
}