Vue項目使用svg圖標實踐
更新時間：2022年09月19日 09:39:34 作者：duyanke888
這篇文章主要介紹了Vue項目使用svg圖標實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一. svg圖標介紹
svg圖標是用作Web應用程序或移動應用程序內(nèi)的圖標或圖像按鈕。
圖標使用svg的優(yōu)點：
- 可以輕松地按比例放大和縮小圖標，具體取決于要在應用程序中顯示的位置以及顯示應用程序的屏幕尺寸。
- svg圖標具有優(yōu)于位圖圖形的優(yōu)點，即按比例放大或縮小時它們?nèi)匀豢雌饋聿诲e。
- 位圖圖形在按比例放大時趨于像素化，而在按比例縮小時會失去質(zhì)量（像素）。
這里只討論svg的特點，不對svg圖標的文件結構進行介紹。
二. svg圖標的獲取方式
漂亮和精致的圖標ICON可以為整個UI界面加分不少，下面提供四個常用的免費SVG下載地址，提供給大家使用，基本可以滿足絕大部分的使用需求。
這里推薦國內(nèi)Iconfont-阿里巴巴矢量圖標庫
介紹：阿里巴巴體驗團隊傾力打造，功能很強大且圖標內(nèi)容很豐富的矢量圖標庫，提供矢量圖標下載、在線存儲、格式轉換等功能。
三. Vue項目使用svg圖標的環(huán)境配置
安裝依賴
npm install --save-dev svg-sprite-loader
四. Vue項目使用svg圖標的項目配置
1.新建icon文件夾放置icon圖標，并在此文件夾中新建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矢量圖標使用配置
* 使用svg-sprite-loader編譯svg，如果使用file-loader時排除src/icons下的矢量圖標
* @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文件
//下面這個是導入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圖標的相關設置
//svg圖標的設置
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對應圖標svg文件的名稱；className對應圖標的css樣式屬性，設置相關屬性可以改變svg圖標的樣式。
注意
若svg圖標的顏色并沒有變化，可以選擇打開svg文件，刪除style標簽里的每一項fill樣式設置.
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要實現(xiàn)給項目的整個背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue+Vant實現(xiàn)7天日歷展示并在切換日期時實時變換功能
本文介紹了如何利用Vue和Vant框架結合moment.js插件來實現(xiàn)一個7天日歷展示功能,在這個功能中,用戶可以在切換日期時看到界面的實時變化,此外,文章還提供了代碼實現(xiàn)和效果測試的詳細步驟,幫助開發(fā)者能夠順利完成類似的項目開發(fā)2024-10-10
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
創(chuàng)建vue項目沒有router、view的解決辦法
在學習vue的時候遇到很多問題,這里做一些總結,下面這篇文章主要給大家介紹了關于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue登錄以及權限驗證相關的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了Vue實現(xiàn)電梯樣式錨點導航效果流程，這種導航效果廣泛應用于商城點餐購物情景，文中通過示例代碼介紹的很詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-05-05
關于對keep-alive的理解,使用場景以及存在的問題解讀
這篇文章主要介紹了關于對keep-alive的理解,使用場景以及存在的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue 讓元素抖動/擺動起來的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue 路由子組件created和mounted不起作用的解決方法
今天小編就為大家分享一篇vue 路由子組件created和mounted不起作用的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
很多情況下,進入和退出vue界面,都沒有清除定時器,從而導致有很多定時器一起工作,這樣肯定是不行的,下面這篇文章主要給大家介紹了關于vue中清除定時器的方法,需要的朋友可以參考下2023-02-02