Vue項目使用svg圖標(biāo)實(shí)踐
一. svg圖標(biāo)介紹
svg圖標(biāo)是用作Web應(yīng)用程序或移動應(yīng)用程序內(nèi)的圖標(biāo)或圖像按鈕。
圖標(biāo)使用svg的優(yōu)點(diǎn)：
- 可以輕松地按比例放大和縮小圖標(biāo)，具體取決于要在應(yīng)用程序中顯示的位置以及顯示應(yīng)用程序的屏幕尺寸。
- svg圖標(biāo)具有優(yōu)于位圖圖形的優(yōu)點(diǎn)，即按比例放大或縮小時它們?nèi)匀豢雌饋聿诲e。
- 位圖圖形在按比例放大時趨于像素化，而在按比例縮小時會失去質(zhì)量（像素）。
這里只討論svg的特點(diǎn)，不對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使用自定義指令實(shí)現(xiàn)頁面底部加水印
本文主要實(shí)現(xiàn)給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue+Vant實(shí)現(xiàn)7天日歷展示并在切換日期時實(shí)時變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實(shí)現(xiàn)一個7天日歷展示功能,在這個功能中,用戶可以在切換日期時看到界面的實(shí)時變化,此外,文章還提供了代碼實(shí)現(xiàn)和效果測試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項目開發(fā)2024-10-10
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
創(chuàng)建vue項目沒有router、view的解決辦法
在學(xué)習(xí)vue的時候遇到很多問題,這里做一些總結(jié),下面這篇文章主要給大家介紹了關(guān)于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue登錄以及權(quán)限驗證相關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了vue登錄以及權(quán)限驗證相關(guān)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點(diǎn)餐購物情景，文中通過示例代碼介紹的很詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-05-05
關(guān)于對keep-alive的理解,使用場景以及存在的問題解讀
這篇文章主要介紹了關(guān)于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue 讓元素抖動/擺動起來的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 讓元素抖動/擺動起來的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue 路由子組件created和mounted不起作用的解決方法
今天小編就為大家分享一篇vue 路由子組件created和mounted不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
很多情況下,進(jìn)入和退出vue界面,都沒有清除定時器,從而導(dǎo)致有很多定時器一起工作,這樣肯定是不行的,下面這篇文章主要給大家介紹了關(guān)于vue中清除定時器的方法,需要的朋友可以參考下2023-02-02