Vite項(xiàng)目中SVG雪碧圖的實(shí)現(xiàn)
在當(dāng)前前端開發(fā)過程中，圖標(biāo)管理痛點(diǎn)問題解決辦法：
1、字體圖標(biāo)（如iconfont）雖然方便，但在高清屏幕下容易模糊，且顏色單一；
2、而直接使用<img>加載多個SVG文件又會帶來大量HTTP請求。
3、SVG雪碧圖結(jié)合了兩者的優(yōu)點(diǎn)：既能保持矢量清晰度，又能合并請求，還可以通過CSS靈活控制顏色。
4、以下介紹如何在Vite項(xiàng)目中使用vite-plugin-svg-icons插件，優(yōu)雅地實(shí)現(xiàn)SVG雪碧圖。
什么是SVG雪碧圖？
SVG雪碧圖的核心思想是將多個SVG圖標(biāo)合并到一個文件中，每個圖標(biāo)用一個<symbol>元素定義，并賦予唯一的id。使用時，通過<use xlink:href="#icon-id">來引用對應(yīng)的圖標(biāo)。這樣做不僅減少了網(wǎng)絡(luò)請求，而且所有圖標(biāo)都以矢量形式存在，無論放大多少倍都清晰銳利。
一個典型的雪碧圖文件結(jié)構(gòu)如下：
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
</svg>
然后在頁面中引用：
<svg><use xlink:href="#icon-home" rel="external nofollow" /></svg>
為什么選擇 vite-plugin-svg-icons？
手動維護(hù)雪碧圖不僅繁瑣，而且容易出錯。vite-plugin-svg-icons是專為Vite設(shè)計(jì)的插件，它可以：
- 自動掃描指定文件夾中的所有SVG文件，并生成雪碧圖；
- 開發(fā)環(huán)境實(shí)時更新，新增或修改圖標(biāo)無需重啟服務(wù)；
- 支持SVGO優(yōu)化，壓縮圖標(biāo)體積；
- 可自定義symbolId格式，方便在代碼中引用；
- 與Vite完美集成，無需額外配置loader。
原理簡述
插件的核心邏輯是在構(gòu)建時（或開發(fā)服務(wù)器啟動時）讀取iconDirs目錄下的所有SVG文件，將它們轉(zhuǎn)換為<symbol>片段，并組合成一個大的<svg>元素。在開發(fā)模式下，這個<svg>會通過一個虛擬模塊動態(tài)注入到DOM中；生產(chǎn)構(gòu)建時，則會將雪碧圖打包到最終的assets目錄，并通過入口文件中的注冊代碼自動注入。
快速上手
1. 安裝插件
在Vite項(xiàng)目根目錄執(zhí)行：
npm install -D vite-plugin-svg-icons # 或 yarn add -D vite-plugin-svg-icons
2. 配置 vite.config.js
打開vite.config.js，引入插件并配置：
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({
plugins: [
// ... 其他插件
createSvgIconsPlugin({
// 指定要緩存的圖標(biāo)文件夾，即存放SVG文件的目錄
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式，這里設(shè)置為 'icon-文件名'，后面使用 <use href="#icon-xxx" rel="external nofollow" />
symbolId: 'icon-[name]',
// 可選：SVGO壓縮配置
svgoOptions: {
plugins: [
// 例如，移除所有圖標(biāo)的fill屬性，以便通過CSS控制顏色
{ name: 'removeAttrs', params: { attrs: 'fill' } }
]
}
})
]
})
注意：
iconDirs路徑必須正確指向你的圖標(biāo)文件夾。建議將所有SVG圖標(biāo)存放在src/assets/icons下。
3. 在入口文件中注冊插件
在項(xiàng)目的入口文件（如src/main.js或src/main.ts）中添加一行特殊的導(dǎo)入語句，這行代碼會觸發(fā)插件的運(yùn)行時邏輯，將雪碧圖注入到頁面中。
import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register' // 關(guān)鍵！注入雪碧圖
createApp(App).mount('#app')
virtual:svg-icons-register是一個由插件提供的虛擬模塊，它會在DOM中創(chuàng)建一個隱藏的<svg>元素，包含所有圖標(biāo)的<symbol>定義。
4. 封裝一個通用的 SvgIcon 組件
為了使用方便，我們通常封裝一個可復(fù)用的圖標(biāo)組件。以Vue 3為例，創(chuàng)建一個SvgIcon.vue文件：
<!-- src/components/SvgIcon.vue -->
<template>
<svg
aria-hidden="true"
:class="['svg-icon', $attrs.class]"
:style="customStyle"
>
<use :xlink:href="iconName" rel="external nofollow" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
name: {
type: String,
required: true
},
color: {
type: String,
default: 'currentColor'
},
size: {
type: [Number, String],
default: '1em'
}
})
const iconName = computed(() => `#icon-${props.name}`)
const customStyle = computed(() => ({
width: typeof props.size === 'number' ? `${props.size}px` : props.size,
height: typeof props.size === 'number' ? `${props.size}px` : props.size,
color: props.color
}))
</script>
<style scoped>
.svg-icon {
vertical-align: -0.15em; /* 與文字對齊 */
fill: currentColor; /* 繼承顏色 */
overflow: hidden;
}
</style>
5. 全局注冊組件（可選）
為了讓組件在項(xiàng)目中隨處可用，可以在入口文件中全局注冊：
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')
6. 在頁面中使用圖標(biāo)
現(xiàn)在，只需將SVG文件放入src/assets/icons目錄，例如home.svg和user.svg，然后在任意Vue組件中：
<template>
<div>
<!-- 基礎(chǔ)用法，使用 home.svg 圖標(biāo)，大小1em，顏色默認(rèn) -->
<SvgIcon name="home" />
<!-- 自定義顏色和大小 -->
<SvgIcon name="user" color="#ff6b6b" size="32" />
<!-- 動態(tài)綁定 -->
<SvgIcon :name="isActive ? 'star-filled' : 'star'" />
</div>
</template>
最終渲染時，插件會自動生成類似下面的DOM結(jié)構(gòu)：
<svg id="__svg__icons__dom__" style="display: none;"> <symbol id="icon-home" viewBox="...">...</symbol> <symbol id="icon-user" viewBox="...">...</symbol> </svg>
然后<SvgIcon name="home">會生成<use href="#icon-home">，從而顯示對應(yīng)圖標(biāo)。
進(jìn)階配置
自定義 symbolId 格式
symbolId選項(xiàng)支持多種占位符：
[name]：文件名（不含擴(kuò)展名）[dir]：相對于iconDirs的目錄路徑[path]：完整相對路徑
例如：symbolId: 'icon-[dir]-[name]'，如果你的文件結(jié)構(gòu)是src/assets/icons/common/logo.svg，生成的id就是icon-common-logo。
SVG 壓縮與優(yōu)化
通過svgoOptions可以自定義SVGO配置。例如，移除fill屬性以允許通過CSS控制顏色：
svgoOptions: {
plugins: [
{ name: 'removeAttrs', params: { attrs: 'fill' } }
]
}
你也可以完全自定義SVGO配置，詳情參考SVGO文檔。
常見問題與解決
1. 圖標(biāo)不顯示？
- 檢查
iconDirs路徑是否正確，確保SVG文件確實(shí)存放在該目錄下。 - 確認(rèn)在入口文件中已導(dǎo)入
'virtual:svg-icons-register'。 - 檢查生成的
symbolId是否與<use>中的href一致。可以在瀏覽器開發(fā)者工具中查看隱藏的<svg>元素，確認(rèn)是否有對應(yīng)的<symbol>存在。
2. 圖標(biāo)顏色無法改變？
SVG文件本身可能自帶了fill或stroke屬性?？梢酝ㄟ^SVGO的removeAttrs插件移除這些屬性，或者在封裝組件時通過CSS覆蓋：
.svg-icon {
fill: currentColor;
}
同時在vite.config.js中配置removeAttrs插件（如上所示），以確保圖標(biāo)不包含固定顏色。
參考資料：
到此這篇關(guān)于Vite項(xiàng)目中SVG雪碧圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vite SVG雪碧圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實(shí)現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
vue3+vite+ts使用monaco-editor編輯器的簡單步驟
因?yàn)楫呍O(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下2023-01-01
elementUI Table組件實(shí)現(xiàn)表頭吸頂效果(示例代碼)
文章介紹了如何在vue2.6+和elementUI環(huán)境下實(shí)現(xiàn)el-table組件的表頭吸頂效果,通過添加樣式、注冊指令、引入指令并在父元素中避免使用overflow:hidden,可以實(shí)現(xiàn)場景下表頭始終可見,本文通過實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了vue動畫效果實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了vue.js+animate.css實(shí)現(xiàn)的動畫切換效果相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡易的彈出框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了vue輪播圖插件vue-concise-slider的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue2、Vue3中的$scopedSlots和$slots區(qū)別小結(jié)
本文主要介紹了Vue2、Vue3中的$scopedSlots和$slots區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
當(dāng)遍歷一個數(shù)組或枚舉一個對象進(jìn)行迭代循環(huán)展示時，就會用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11