说实话问题来的有点突然,只要我不使用svg图标,问题不是都解决了吗? 灵魂拷问:iconfont难道不香吗? 此事说来话长,长话短说就是:设计只认svg 「纯展示」最快最简单的办法就是插件:vue-svg-icon、svg-sprite-loader、vue-svgicon 「改变svg颜色」最简单的插件就是:svg-sprite-loader + svgo + svgo-loader 「vue-svg-icon」可显示、修改iconfont导出的svg文件;无法显示sketch导出的svg实现 「svg-sprite-loader」能正常显示svg文件,修改颜色需要搭配svgo使用 「vue-svgicon」未做尝试 svg-sprite-loader :可以将多个 svg 打包成 svg-sprite svgo:去除svg文件中的冗余信息 造成svg无法在页面中修改颜色的原因是,svg文件中path的属性fill设置了值,只有去除或为空才能正确使用color来设置颜色。 优势 劣势安装依赖
npm install svg-sprite-loader svgo svgo-loader --save-dev
vue.config.js(vue-cli 3.0)增加webpack配置代码:
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: config => {
// 清除svg默认配置对./src/icons文件夹的处理
config.module
.rule("svg")
.exclude.add(resolve("src/assets/icons")) // icons存放地(svg放的地方)
.end()
// 添加新的rule处理./src/icons文件夹的svg文件
config.module
.rule("svg-sprite")
.test(/\.svg$/)
.include
.add(resolve("src/assets/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
include: ["src/assets/icons"]
})
.end()
.before("svg-sprite-loader")
.use("svgo-loader")
.loader("svgo-loader")
.options({
plugins: [
{removeAttrs: {attrs: "path:fill"}}
]
})
.end()
}
}
配置封装 svg 组件
<template>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<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'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script
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)
引入 svg 配置文件(main 引入)
import "@/assets/icons";
使用
//在代码中使用
<svg-icon class="arrow_right" icon-class="rightArrow" />// 这里icon-class写的就是svg文件的名字
知其所以然
svg优势
iconfont