本文目标
在Vue的前端项目开发中，我们在很多地方都会使用到图标，而当前SVG格式的图标被越来越多的采用。
在开发中，我们一般需要将SVG的图片存放到特定位置，然后再进行调用。需要有一套有效的方式对SVG进行存储和调用。本文的主要目的就是介绍这套方法。预期可以帮助您实现以下开发需求：
1. 将下载下来的SVG格式图标存放到特定目录；
2. 在VUE中进行调用；
3. 可以对icon进行配置；
为什么会采用SVG作为图标格式？
1. 为了能兼容电脑、手机，同时面对各种浏览器的分辨率，传统的图标早已经无法满足设计需求。SVG矢量图完美的解决了这一点。
2. SVG的图标资源非常的丰富而且灵活，请参见文章《常用的免费SVG资源地址》
实际效果
image
安装及配置方法
一、安装组件svg-sprite-loader
npm install svg-sprite-loader --save-dev
二、在src/components下新建文件夹及文件SvgIcon/index.vue，index.vue中内容如下
<template>
<svg :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";
}
}
}
};
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
三、在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
四、在main.js中引入svg
import './icons'
五、修改根目录的vue.config.js（主要是为打包进行设置）
module.exports = {
chainWebpack: config => {
config.plugin("define").tap(args => {
const argv = process.argv;
const icourt = argv[argv.indexOf("--icourt-mode") + 1];
args[0]["process.env"].MODE = `"${icourt}"`;
return args;
});
// svg rule loader
const svgRule = config.module.rule("svg"); // 找到svg-loader
svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
// 修改images loader 添加svg处理
const imagesRule = config.module.rule("images");
imagesRule.exclude.add(resolve("src/icons"));
config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);
},
devServer: {
host: "0.0.0.0",
port: 8081,
proxy: {
// 配置跨域
"/api": {
target: "http://127.0.0.1:7001",
ws: true,
changOrigin: true,
pathRewrite: {
"^/api": "/"
}
}
}
}
};
现在就可以正式使用
1、下载SVG文件，然后将svg文件放置到src/icons/svg
2、在页面具体要使用的地方进行应用，方式如下：
<svg-icon icon-class="your-icon"></svg-icon>
your-icon是保存在src/icons/svg下面的icon文件名称。比如可以修改为home, check, cart, back等
3、svg最大的特点是矢量，也是为什么我们会选择svg的原因，所以一定会有对svg进行自定义的情况。此时，您只需要在对应vue文件中写代样式即可
<svg-icon icon-class="more" class-name="moreIcon "/>
<style lang="scss" scoped>
.moreIcon {
width: 20px;
height: 20px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
具体案例
1. 目标效果
2. 分析
这个地方是作为标签使用，icon是需要缩小的，所以需要自定义icon的样式，同时需要对svg进行自定义颜色
3. 代码
<span style="font-size:0px;">
<i class="inline-block text-jpcolor-500">
<svg-icon icon-class="check" class-name="serviceIcon"/>
</i>
<span class="inline-block relative" style="padding-left:2px;font-size:12px;top:-1px;">免费送货</span>
</span>
<style lang="scss" scoped>
.serviceIcon {
width: 11px;
height: 11px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4. 注：svg有的时候并不是符合需求，在缩小以后总会出现差强人意的地方，但基本上可以满足95%以上的使用需求。
如图：
这个时候就要多一些耐心去找更适合的svg样式，或者是自己修改svg（不在此文范畴）。
[本文到底啦]
网友评论