Vue-cli 项目使用 iconfont svg 不显示。
大部人都是万事俱备只欠配置，我也是。所以，我们先说配置。
svg相关配置写在哪？
vue-cli版本不同，写的地方也不一样。
项目里没有vue.config.js 文件，走的坑之一，自己在根目录下建一个。
走的坑之二，写在 config/index.js中
也是查资料，加上频繁重启项目，终于细心发现了项目运行时加载的配置文件。
我的答案：在 webpack.base.conf.js 配置 svg。
完整配置如下：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
特别注意：
url-loader有好几个配置，别改错地方了。
在url-loader 图片（test: /\.(png|jpe?g|gif|svg)(\?.*)?$/）这里（修改）增加一行 exclude: [resolve('src/icons')]
url-loader 上面新增svg的配置
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
svg-sprite-loader 这是原来配置里没有的，要自己手动新增上去。
SVG Sprite插件
安装
npm install svg-sprite-loader --save-dev
还要安装 url-loader
npm install url-loader --save-dev
npm install file-loader --save-dev
file-loader不知道要不要，反正出错的时候，啥方法都试过了。
包括我本来装的svg版本号都到5了，后来检索说是版本太高也不行，还换了3的版本。包括 url-loader 的版本。
有些问题的确是不同插件版本的兼容问题，但我这边主要是因为配置吧，配置写错了，不报错，svg图片不显示。
注意：
修改完配置文件，需要重启项目服务，修改才生效。我也是因为频繁重启项目，才发现配置该写在哪里的，傻乎乎。
目录结构
新建SvgIcon组件
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
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>
新下载的svg文件放icons/svg文件夹中
icons中的index.js
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)
main.js 全局引用 svg的 icons
import '@/icons' // icon
应用
<div class="footer">
<div class="right">
<div class="input">跟小伙伴聊起来！</div>
</div>
<div class="left">
<span><i class="el-icon-star-off"/></span>
<span><svg-icon icon-class="aixin" /></span>
<span><i class="el-icon-chat-round"/></span>
</div>
</div>