安装
cnpm install svg-sprite-loader --save-dev
创建svg文件夹存放svg图标
创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。
vue.config.js 中配置svg图片
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: "[name]", //注意这里，可能会导致svg不显示，要与vue文件中的name一致
})
.end();
创建SvgIcon公用组件
<template>
<svg :class="getClassName" :width="width" :height="height" aria-hidden="true">
<use :xlink:href="getName"></use>
</svg>
</template>
<script>
export default {
name: "icon-svg",
props: {
name: {
type: String,
required: true,
},
className: {
type: String,
},
width: {
type: String,
},
height: {
type: String,
},
},
computed: {
getName() {
return `#icon-${this.name}`;
},
getClassName() {
if (this.className) {
return "icon-svg svg-icon " + this.className;
} else {
return "icon-svg svg-icon";
}
},
},
};
</script>
<style>
.icon-svg {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
</style>
创建index.js 导入所有svg图标
icons文件夹创建index.js 自动导入所有svg图标。
/**
* 字体图标, 统一使用SVG Sprite矢量图标(http://www.iconfont.cn/）
*
* 使用:
* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)
* 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)
* 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件
* 3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]
*
* 注意:
* 1. 通过2-2 添加icons, getNameList方法无法返回对应数据
*/
import Vue from "vue";
import IconSvg from "@/components/icon-svg";
Vue.component("IconSvg", IconSvg);
// register globally
const req = require.context("./svg", false, /\.svg$/);
const requireAll = (requireContext) =>
requireContext.keys().map(requireContext);
执行 requireContext.keys().map(requireContext)得到返回的数据：
main.js中引入icons/index.js
使用
