vue2.0中svg图片的引用
1、基础工作都是引用了svg-sprite-loader这个插件
npm i svg-sprite-loader --save
2、写一个Svglcon的组件 (components/Svglcon),在components目录下新建一个SvgIcon文件夹,然后再新建一个index.vue文件,如:
3、index.vue文件内容为:
<template>
<svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
<use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
</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: 1rem;
height: 1rem;
vertical-align: -0.15rem;
fill: currentColor;
overflow: hidden;
}
</style>
4、导入需要的svg资源文件,在src目录下新建一个icons目录,并在其中新建一个index.js文件,目录结构如下:
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)
这一步的主要目的是一次加载完全部svg资源,并注册了全局组件
5、注册为全局组件了还需要在main.js中引入一下icons的文件,如:
6、然后我们在模板中使用,如下:
到这里基础工作都做完了,但是svg还是显示不出来的,接下来又分2种情况
对于第一种情况
一、如果项目里有引用
的情况,这里引用elementUI作者的话(我们来介绍如何在 vue-cli
的基础上进行改造,加入 svg-sprite-loader
。
我们发现vue-cli
默认情况下会使用 url-loader
对svg进行处理,会将它放在/img
目录下,所以这时候我们引入svg-sprite-loader
会引发一些冲突。)
最合理的做法是使用 webpack 的 exclude 和 include ,让svg-sprite-loader
只处理你指定文件夹下面的 svg,url-loaer
只处理除此文件夹之外的所以 svg,这样就完美解决了之前冲突的问题。 代码如下
这里做完之后就能完整显示了。
对于第二种情况
二、 项目里没有引用,
这时需要在
文件中添加如下配置代码: