参考开源项目:vue-element-admin-master
安装svg-sprite-loader
components文件夹中,创建SvgIcon文件夹
添加index.vue组件
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-bind="$attrs"
></div>
<svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
<use :href="iconName" />
</svg>
</template>
<script>
import { isExternal } from "@/utils/validate.js"
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: "",
},
},
computed: {
isExternal() {
//支持从外部网址导入svg。
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%`,
}
},
},
}
</script>
<style scoped>
.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;
}
</style>
其中validate.js
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
src中添加icons文件夹,svg文件夹,index.js
svg文件放在svg文件夹中
index.js
//import Vue from "vue"
//import { createApp } from "vue"
//import App from "../App.vue"
//import SvgIcon from "@/components/SvgIcon"
// register globally
// Vue.component("svg-icon", SvgIcon)
//createApp(App).component("svg-icon", SvgIcon)
const req = require.context("./svg", false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
requireAll(req)
main.js中全局注册
import { createApp } from "vue"
import App from "./App.vue"
import "./registerServiceWorker"
import router from "./router"
import store from "./store"
import ElementPlus from "element-plus"
import "element-plus/lib/theme-chalk/index.css"
import "./icons"
import SvgIcon from "@/components/SvgIcon"
createApp(App)
.component("svg-icon", SvgIcon)
.use(store)
.use(router)
.use(ElementPlus)
.mount("#app")
增加vue.config.js配置文件
const path = require("path")
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: "/",
outputDir: "dist",
assetsDir: "static",
chainWebpack: (config) => {
//const svgRule = config.module.rule("svg")
//svgRule.uses.clear()
//svgRule.use("vue-loader").loader("vue-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-icon
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<div>
<el-button>测试</el-button>
<el-button type="success">测试</el-button>
<el-button type="primary">测试</el-button>
</div>
<br />
<br />
<br />
<div>
<svg-icon iconClass="bug"></svg-icon>
<svg-icon iconClass="eye" style="margin-left: 50px"></svg-icon>
<svg-icon iconClass="email" style="margin-left: 50px"></svg-icon>
<svg-icon iconClass="list" style="margin-left: 50px"></svg-icon>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
npm run serve