vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
更新時(shí)間：2023年04月22日 14:33:06 作者：全世界最好的李憨憨iu
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue封裝自己的Svg圖標(biāo)組件庫(kù)
安裝及配置方法
一、安裝組件svg-sprite-loader
npm install svg-sprite-loader --save-dev || yarn add svg-sprite-loader
二、在src/components下新建文件夾及文件SvgIcon/index.vue，index.vue添加如下內(nèi)容:
<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" rel="external nofollow" rel="external nofollow" />
</svg>
</template>
<script>
//導(dǎo)入公共方法,校驗(yàn)傳入的iconClass是否為外部鏈接
//匹配http或者 https
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
//匹配http或者 https
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>
在src下新建utils/validate.js,定義公共的方法,用于校驗(yàn)傳入的iconClass是否為外部鏈接,內(nèi)容如下:
//匹配http或者 https
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
三、在src下新建icons文件夾，及icons文件夾下svg文件夾、index.js文件，將svg圖片放入svg文件夾中,在 index.js文件中添加如下內(nèi)容
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg 組件
// 全局注冊(cè)svg組件
Vue.component('svg-icon', SvgIcon)
// 工程化導(dǎo)入svg圖片
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
四、在main.js中引入svg
import '@/icons' // icon
五、配置 vue.config.js(主要為打包進(jìn)行設(shè)置)
const path = require('path')
// 將傳入的相對(duì)路徑轉(zhuǎn)換成絕對(duì)路徑
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack (config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
六、在組件中使用
<div>
<svg-icon icon-class="user" />//傳入svg文件名稱(chēng)
<svg-icon icon-class="password" />
</div>
vue使用svg封裝圖標(biāo)組件，代替img圖片提高性能
可行性分析
如何在vue中使用svg封裝圖標(biāo)組件，代替img圖片提高性能。
- 1： 配置：svg-sprite-loader
- 2：自定義 svg-icon組件
- 3：導(dǎo)出
.svg模塊
目錄介紹
|-src |-main.js |-icons |-svg |-user.svg |-psd.svg |-index.js |-SvgIcon.vue |-vue.config.js
說(shuō)明
為了讓字體圖標(biāo)模塊成為，獨(dú)立于組件，獨(dú)立于項(xiàng)目的模塊
- 1：優(yōu)點(diǎn)：在任意的項(xiàng)目中都可以引用。需要什么圖標(biāo)下載獨(dú)贏svg就可以了
- 2：未完成：整個(gè)常見(jiàn)圖標(biāo)，發(fā)布npm 提供給更多的開(kāi)發(fā)者使用
- 3: 注意：如果在組件庫(kù)中，不能使用vue.config.js 使用打包工具配置文件
1. 使用說(shuō)明
<svg-icon iconClass="user" className="use" />
<style>
.use{
font-size:100px;
}
</style> | 屬性 | 類(lèi)型是否必填 | 作用 |
|---|---|---|
| iconClass | string|必填 | 設(shè)置使用哪個(gè)圖片，值為.svg文件名 |
| className | string|非必填 | 自定義圖標(biāo)樣式 |
實(shí)踐方案
封裝SvgIcon組件
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<!-- xlink:href=#dl-icon-lqz -->
<use :xlink:href="iconName" rel="external nofollow" rel="external nofollow" />
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: "",
},
},
computed: {
svgClass() {
if (this.className) {
return `svg-icon ${this.className}`;
}
return "svg-icon";
},
iconName() {
return `#dl-icon-${this.iconClass}`;
},
},
};
</script>
<style scoped>
.svg-icon{
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
</style> 1. 準(zhǔn)備好對(duì)應(yīng)的svg文件
去阿里圖標(biāo)庫(kù)下載需要的svg文件，一個(gè)圖標(biāo)一個(gè)svg文件并放在 src/icon/svg目錄下
阿里圖標(biāo)鏈接地址](https://www.iconfont.cn/))
2. 配置.svg模塊
2.1 安裝：svg-sprite-loader
npm i svg-sprite-loader -D
2.2 vue.config.js中配置svg-sprite-loader
//vue.config.js
const path = require('path');
// 在vue.config.js中沒(méi)有配置 resolve 方法， 需要自定義一個(gè)
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.module.rules.delete('svg'); // 重點(diǎn):刪除默認(rèn)配置中處理svg
config.module
.rule('svg-sprite-loader') // rule 匹配規(guī)則
.test(/\.svg$/) // 用正則匹配 文件
.include // 包含 包括
.add(resolve('src/icon')) // 處理svg目錄
.end()
.use('svg-sprite-loader') // 配置loader use() 使用哪個(gè)loader
.loader('svg-sprite-loader')// 加載loader
.options({
// [name] 變量。一般表示匹配到的文件名 xxx.svg
// 注意： symbolId 在 <use xlink:href="#dl-icon-svg文件名" rel="external nofollow" />
symbolId: 'dl-icon-[name]', // 將所有的.svg 集成到 symbol中，當(dāng)使用 類(lèi)名 icon-文件名
});
},
};
3. 導(dǎo)出所有.svg 注冊(cè)組件
// index.js ?
??
// 引入vue ?
??
import Vue from 'vue'; ?
??
// 引入svgIcon組件 ?
??
import SvgIcon from './SvgIcon.vue'; ?
??
// 注冊(cè)為全局組件 ?
??
Vue.component('svg-icon', SvgIcon); ?
??
// 引入當(dāng)前svg目錄下的文件、不遍歷子目錄、匹配以'.svg'為結(jié)尾的文件 ?
??
/** ?
??
?* webpack 是模塊化打包工具 ?
??
?* require.context() ?返回上下文構(gòu)造函數(shù)webpackContext。存放了所有匹配到的模塊信息 ?
??
?* 參一：設(shè)置配置模塊目錄 ?
??
?* 參二：表示是否匹配子目錄 true 匹配 false 不匹配 ?
??
?* 參三：正則， 匹配文件的正則表達(dá)式。 ?
??
?* ?
??
?* webpackContext.keys() 返回所有匹配到模塊的文件地址 【集合】 ?
??
?*/ ?
??
const webpackContext = require.context('./svg', false, /\.svg$/); ?
??
??
??
// // 相當(dāng)于 req.keys().forEach(key => req(key)), req.keys()是匹配到的svg文件的路徑數(shù)組 ?
??
const requireAll = (requireContext) => { ?
??
? ? // requireContext.keys() ? 匹配的 文件路徑數(shù)組 ?
??
? ? return requireContext.keys().map(requireContext) ?
??
}; ?
??
// // 得到一個(gè)完整解析的module數(shù)組 ?
??
requireAll(webpackContext); ?
??
??
??
// 實(shí)現(xiàn):webpackApi方式自動(dòng)化導(dǎo)入模塊，代替 import...from方式```
??運(yùn)行icon/index.js
// msin.js ? import '@/icon/inde.js' ?
接下來(lái)就可以使用 svg-icon圖標(biāo)組件了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
這篇文章主要介紹了Vue和Bootstrap的整合思路詳解,需要的朋友可以參考下2017-06-06
詳解vue+vuex+koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法
本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場(chǎng)景說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間（2）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
vue如何使用 Slot 分發(fā)內(nèi)容實(shí)例詳解
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實(shí)例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了如何構(gòu)建一個(gè)Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開(kāi)發(fā)，感興趣的朋友可以了解下2020-10-10
Vue3中使用Element-Plus的el-upload組件限制只上傳一個(gè)文件的功能實(shí)現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進(jìn)行文件上傳時(shí),有時(shí)候需要限制只能上傳一個(gè)文件,本文將介紹如何通過(guò)配置 el-upload 組件實(shí)現(xiàn)這個(gè)功能,讓你的文件上傳變得更加簡(jiǎn)潔和易用,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue?內(nèi)置指令梳理總結(jié)，文章首先從v-text指令展開(kāi)內(nèi)容介紹，具有一定的知識(shí)性參考價(jià)值，需要的小伙伴可以參考一下2022-05-05