本文目標(biāo)
在Vue的前端項(xiàng)目開發(fā)中既琴，我們?cè)诤芏嗟胤蕉紩?huì)使用到圖標(biāo)，而當(dāng)前SVG格式的圖標(biāo)被越來(lái)越多的采用泡嘴。
在開發(fā)中甫恩，我們一般需要將SVG的圖片存放到特定位置，然后再進(jìn)行調(diào)用酌予。需要有一套有效的方式對(duì)SVG進(jìn)行存儲(chǔ)和調(diào)用磺箕。本文的主要目的就是介紹這套方法。預(yù)期可以幫助您實(shí)現(xiàn)以下開發(fā)需求：
1. 將下載下來(lái)的SVG格式圖標(biāo)存放到特定目錄抛虫；
2. 在VUE中進(jìn)行調(diào)用松靡；
3. 可以對(duì)icon進(jìn)行配置；
為什么會(huì)采用SVG作為圖標(biāo)格式建椰？
1. 為了能兼容電腦雕欺、手機(jī)，同時(shí)面對(duì)各種瀏覽器的分辨率棉姐，傳統(tǒng)的圖標(biāo)早已經(jīng)無(wú)法滿足設(shè)計(jì)需求屠列。SVG矢量圖完美的解決了這一點(diǎn)。
2. SVG的圖標(biāo)資源非常的豐富而且靈活谅海，請(qǐng)參見文章《常用的免費(fèi)SVG資源地址》
實(shí)際效果
image
安裝及配置方法
一脸哀、安裝組件svg-sprite-loader
npm install svg-sprite-loader --save-dev
二、在src/components下新建文件夾及文件SvgIcon/index.vue扭吁，index.vue中內(nèi)容如下
<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文件內(nèi)容如下
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（主要是為打包進(jìn)行設(shè)置）
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, 如果不這樣做會(huì)添加在此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": "/"
}
}
}
}
};
現(xiàn)在就可以正式使用
1、下載SVG文件宇色，然后將svg文件放置到src/icons/svg
2九杂、在頁(yè)面具體要使用的地方進(jìn)行應(yīng)用颁湖，方式如下：
<svg-icon icon-class="your-icon"></svg-icon>
your-icon是保存在src/icons/svg下面的icon文件名稱。比如可以修改為home, check, cart, back等
3例隆、svg最大的特點(diǎn)是矢量甥捺，也是為什么我們會(huì)選擇svg的原因，所以一定會(huì)有對(duì)svg進(jìn)行自定義的情況镀层。此時(shí)镰禾，您只需要在對(duì)應(yīng)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. 目標(biāo)效果
2. 分析
這個(gè)地方是作為標(biāo)簽使用，icon是需要縮小的唱逢，所以需要自定義icon的樣式吴侦，同時(shí)需要對(duì)svg進(jìn)行自定義顏色
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;">免費(fèi)送貨</span>
</span>
<style lang="scss" scoped>
.serviceIcon {
width: 11px;
height: 11px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4. 注：svg有的時(shí)候并不是符合需求，在縮小以后總會(huì)出現(xiàn)差強(qiáng)人意的地方坞古，但基本上可以滿足95%以上的使用需求备韧。
如圖：
這個(gè)時(shí)候就要多一些耐心去找更適合的svg樣式，或者是自己修改svg（不在此文范疇）痪枫。
[本文到底啦]
