vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)
更新時間：2023年04月22日 14:33:06 作者：全世界最好的李憨憨iu
這篇文章主要介紹了vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue封裝自己的Svg圖標組件庫
安裝及配置方法
一、安裝組件svg-sprite-loader
npm install svg-sprite-loader --save-dev || yarn add svg-sprite-loader
二、在src/components下新建文件夾及文件SvgIcon/index.vue，index.vue添加如下內容:
<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>
//導入公共方法,校驗傳入的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,定義公共的方法,用于校驗傳入的iconClass是否為外部鏈接,內容如下:
//匹配http或者 https
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
三、在src下新建icons文件夾，及icons文件夾下svg文件夾、index.js文件，將svg圖片放入svg文件夾中,在 index.js文件中添加如下內容
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg 組件
// 全局注冊svg組件
Vue.component('svg-icon', SvgIcon)
// 工程化導入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(主要為打包進行設置)
const path = require('path')
// 將傳入的相對路徑轉換成絕對路徑
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文件名稱
<svg-icon icon-class="password" />
</div>
vue使用svg封裝圖標組件，代替img圖片提高性能
可行性分析
如何在vue中使用svg封裝圖標組件，代替img圖片提高性能。
- 1： 配置：svg-sprite-loader
- 2：自定義 svg-icon組件
- 3：導出
.svg模塊
目錄介紹
|-src |-main.js |-icons |-svg |-user.svg |-psd.svg |-index.js |-SvgIcon.vue |-vue.config.js
說明
為了讓字體圖標模塊成為，獨立于組件，獨立于項目的模塊
- 1：優(yōu)點：在任意的項目中都可以引用。需要什么圖標下載獨贏svg就可以了
- 2：未完成：整個常見圖標，發(fā)布npm 提供給更多的開發(fā)者使用
- 3: 注意：如果在組件庫中，不能使用vue.config.js 使用打包工具配置文件
1. 使用說明
<svg-icon iconClass="user" className="use" />
<style>
.use{
font-size:100px;
}
</style> | 屬性 | 類型是否必填 | 作用 |
|---|---|---|
| iconClass | string|必填 | 設置使用哪個圖片，值為.svg文件名 |
| className | string|非必填 | 自定義圖標樣式 |
實踐方案
封裝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. 準備好對應的svg文件
去阿里圖標庫下載需要的svg文件，一個圖標一個svg文件并放在 src/icon/svg目錄下
阿里圖標鏈接地址](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中沒有配置 resolve 方法， 需要自定義一個
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.module.rules.delete('svg'); // 重點:刪除默認配置中處理svg
config.module
.rule('svg-sprite-loader') // rule 匹配規(guī)則
.test(/\.svg$/) // 用正則匹配 文件
.include // 包含 包括
.add(resolve('src/icon')) // 處理svg目錄
.end()
.use('svg-sprite-loader') // 配置loader use() 使用哪個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中，當使用 類名 icon-文件名
});
},
};
3. 導出所有.svg 注冊組件
// index.js ?
??
// 引入vue ?
??
import Vue from 'vue'; ?
??
// 引入svgIcon組件 ?
??
import SvgIcon from './SvgIcon.vue'; ?
??
// 注冊為全局組件 ?
??
Vue.component('svg-icon', SvgIcon); ?
??
// 引入當前svg目錄下的文件、不遍歷子目錄、匹配以'.svg'為結尾的文件 ?
??
/** ?
??
?* webpack 是模塊化打包工具 ?
??
?* require.context() ?返回上下文構造函數(shù)webpackContext。存放了所有匹配到的模塊信息 ?
??
?* 參一：設置配置模塊目錄 ?
??
?* 參二：表示是否匹配子目錄 true 匹配 false 不匹配 ?
??
?* 參三：正則， 匹配文件的正則表達式。 ?
??
?* ?
??
?* webpackContext.keys() 返回所有匹配到模塊的文件地址 【集合】 ?
??
?*/ ?
??
const webpackContext = require.context('./svg', false, /\.svg$/); ?
??
??
??
// // 相當于 req.keys().forEach(key => req(key)), req.keys()是匹配到的svg文件的路徑數(shù)組 ?
??
const requireAll = (requireContext) => { ?
??
? ? // requireContext.keys() ? 匹配的 文件路徑數(shù)組 ?
??
? ? return requireContext.keys().map(requireContext) ?
??
}; ?
??
// // 得到一個完整解析的module數(shù)組 ?
??
requireAll(webpackContext); ?
??
??
??
// 實現(xiàn):webpackApi方式自動化導入模塊，代替 import...from方式```
??運行icon/index.js
// msin.js ? import '@/icon/inde.js' ?
接下來就可以使用 svg-icon圖標組件了
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近一段時間，一直在做主題方面的工作。我們的主題，并不是簡單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說：主題1和主題2看起來完全不一樣，功能甚至都不一樣。這樣，通過切換css就無法做到了，因此我思考良久，使用了如下2種方法2021-06-06
下面小編就為大家?guī)硪黄獪\談mint-ui loadmore組件注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
element中el-cascader級聯(lián)選擇器只有最后一級可以多選
本文主要介紹了element中el-cascader級聯(lián)選擇器只有最后一級可以多選，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
本篇文章主要介紹了vue 1.x 交互實現(xiàn)仿百度下拉列表示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue動態(tài)添加路由后刷新頁面白屏問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決element-ui table設置列fixed時X軸滾動條無法拖動問題
這篇文章主要介紹了解決element-ui table設置列fixed時X軸滾動條無法拖動問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vite項目中配置路由時,可能會遇到文件路徑錯誤導致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設置vite.config.js中的路徑別名以及重啟項目,通過正確配置,可以確保路由正確加載對應的界面文件,避免路徑錯誤導致的問題2024-10-10
這篇文章介紹了vue為自定義路徑設置別名的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
PostCSS 是一個用 JavaScript 編寫的工具,用于將 CSS 轉換為另一種 CSS,在做h5頁面的屏幕適配時,結合 PostCSS 的一些插件能輕松實現(xiàn),下面以結合 postcss-pxtorem 插件為例,詳細介紹配置步驟,需要的朋友可以參考下2025-02-02
VUE獲取Promise對象中PromiseResult中的數(shù)據(jù)(最新推薦)
如果想要在接口請求方法的外面拿到請求的結果,再做相關數(shù)據(jù)處理,往往我們拿到的卻是一個Promise對象,那么遇到這樣的問題如何解決呢,下面小編給大家?guī)砹薞UE?項目中?如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧2023-10-10