Vue項目使用svg圖標(biāo)實踐
更新時間：2022年09月19日 09:39:34 作者：duyanke888
這篇文章主要介紹了Vue項目使用svg圖標(biāo)實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一. svg圖標(biāo)介紹
svg圖標(biāo)是用作Web應(yīng)用程序或移動應(yīng)用程序內(nèi)的圖標(biāo)或圖像按鈕。
圖標(biāo)使用svg的優(yōu)點：
- 可以輕松地按比例放大和縮小圖標(biāo)，具體取決于要在應(yīng)用程序中顯示的位置以及顯示應(yīng)用程序的屏幕尺寸。
- svg圖標(biāo)具有優(yōu)于位圖圖形的優(yōu)點，即按比例放大或縮小時它們?nèi)匀豢雌饋聿诲e。
- 位圖圖形在按比例放大時趨于像素化，而在按比例縮小時會失去質(zhì)量（像素）。
這里只討論svg的特點，不對svg圖標(biāo)的文件結(jié)構(gòu)進(jìn)行介紹。
二. svg圖標(biāo)的獲取方式
漂亮和精致的圖標(biāo)ICON可以為整個UI界面加分不少，下面提供四個常用的免費(fèi)SVG下載地址，提供給大家使用，基本可以滿足絕大部分的使用需求。
這里推薦國內(nèi)Iconfont-阿里巴巴矢量圖標(biāo)庫
介紹：阿里巴巴體驗團(tuán)隊傾力打造，功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫，提供矢量圖標(biāo)下載、在線存儲、格式轉(zhuǎn)換等功能。
三. Vue項目使用svg圖標(biāo)的環(huán)境配置
安裝依賴
npm install --save-dev svg-sprite-loader
四. Vue項目使用svg圖標(biāo)的項目配置
1.新建icon文件夾放置icon圖標(biāo)，并在此文件夾中新建svg文件夾放置svg文件，文件名盡量不要用中文。
2.svg依賴的配置
- 2.1 Vue 2.x的配置
在webpack.base.conf.js中配置允許svg依賴如下：
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/assets/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/assets/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
},
- 2.2 Vue 3.x的配置
在根目錄新建vue.config.js文件中配置如下：
module.exports = {
chainWebpack: config => {
// 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/assets/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
- 2.3 Vue 4.x的配置
在根目錄新建vue.config.js文件中配置如下：
const path = require('path')
module.exports = {
/**
* svg矢量圖標(biāo)使用配置
* 使用svg-sprite-loader編譯svg，如果使用file-loader時排除src/icons下的矢量圖標(biāo)
* @param config
*/
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不這樣做，接下來的 loader 會附加在該規(guī)則現(xiàn)有的 loader 之后。
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './src/icons'))
.end()
.use('file-loader')
.loader('file-loader')
},
}
3.在icon文件夾中新建Svg.vue文件
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" rel="external nofollow" />
</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: 1rem;
height: 1rem;
vertical-align: -0.25em;
fill: currentColor;
overflow: hidden;
}
</style>
4.在icon文件夾中新建index.js文件
//下面這個是導(dǎo)入svgIcon/svg下的所有svg文件
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
/*
第一個參數(shù)是:'./svg' => 需要檢索的目錄，
第二個參數(shù)是：false => 是否檢索子目錄,
第三個參數(shù)是: /\.svg$/ => 匹配文件的正則
*/
requireAll(req)
5.在main.js文件中配置svg圖標(biāo)的相關(guān)設(shè)置
//svg圖標(biāo)的設(shè)置
import '@/assets/icon'
import svgIcon from '@/assets/icon/Svg.vue'
Vue.component('svg-icon', svgIcon)
6.使用svg組件
... <svg-icon icon-class="left" className="icon"></svg-icon> ...
其中icon-class對應(yīng)圖標(biāo)svg文件的名稱；className對應(yīng)圖標(biāo)的css樣式屬性，設(shè)置相關(guān)屬性可以改變svg圖標(biāo)的樣式。
注意
若svg圖標(biāo)的顏色并沒有變化，可以選擇打開svg文件，刪除style標(biāo)簽里的每一項fill樣式設(shè)置.
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
整理項目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
Vue props 單向數(shù)據(jù)流的實現(xiàn)
這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文主要介紹了Vue3中事件總線的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue學(xué)習(xí)之常用指令,結(jié)合實例形式詳細(xì)分析了vue.js創(chuàng)建實例、常用指令及相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue3中watch監(jiān)聽器及源碼學(xué)習(xí)
本文主要介紹了Vue3中watch監(jiān)聽器及源碼學(xué)習(xí),Watch偵聽器在Vue3中特性進(jìn)行了一些改變和優(yōu)化,下面來詳解的介紹一下基本使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實現(xiàn)排行榜效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue之webpack -v報錯解決方案總結(jié),本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
關(guān)于Vue 自定義指令實現(xiàn)元素拖動的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實現(xiàn)元素拖動,在使用自定義指令之前，先對自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01
uniapp實現(xiàn)webview頁面關(guān)閉功能的代碼示例
uniapp用web-view打開一個網(wǎng)頁,網(wǎng)頁中點擊跳轉(zhuǎn)到下一層級的網(wǎng)頁,一層層深入,點擊返回鍵或者頁面上方返回按鈕只能一層層往回退,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)webview頁面關(guān)閉功能的相關(guān)資料,需要的朋友可以參考下2024-03-03