svg的图片有着颜色自定义大小自定义的优势。在阿里图标库可以下载svg图片。
那么在vue框架中我们该怎么使用svg图片呢
这个时候就用到了 webpack 插件 svg-sprite-loader
首先呢自然就是安装了
npm i svg-sprite-loader --save
复制代码
创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js
//index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
/* require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
require.context有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式 */
// 全局注册
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
复制代码
在 webpack.base.conf.js 文件中添加 rules 配置
//webpack.base.conf.js
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [path.resolve(__dirname, '../src/icons/svg')],//包括字体图标文件
// options: {
//symbolId: 'icon-[name]' //这个没有生效,生效的是默认的name
// }
}
复制代码
然后修改 url-loader 配置
//webpack.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
exclude: [
path.resolve(__dirname, '../src/icons/svg'), //排除字体图标文件
],
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
}
复制代码
创建 vue 组件 svg-icon
<!-- @/components/SvgIcon -->
<template>
<svg :class="svgClass" aria-hidden="true" @click="$emit('click')">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
/**
* svg 图标组件
* iconClass="图标名称"
* className="风格名称"
*/
export default {
name: 'svg-icon',
props: {
iconClass: { type: String, required: true },
className: { type: String }
},
computed: {
iconName () {
return `#${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
复制代码
在main.js中引入
import './icons/index.js'
复制代码
这样就能在vue中使用了 具体格式如下
<svg-icon icon-class="svg文件名"/>
复制代码
欢迎到我的博客、我的github逛哦!