快捷導(dǎo)航

在Vue中引入SVG圖標(biāo)的多種實現(xiàn)方案

更新時間：2025年07月11日 10:47:27 作者：前端微白

SVG圖標(biāo)集錦是一個豐富的資源庫,包含了多個知名圖標(biāo)的集合,如bootstrap、feather、iconpark、ikonate和ionicons等,這些圖標(biāo)是為網(wǎng)頁開發(fā)設(shè)計的,具有高質(zhì)量和高度可定制性,在 Vue 項目中優(yōu)雅地引入 SVG 圖標(biāo)可通過多種方案實現(xiàn),下面小編給大家詳細(xì)說說

方案一：直接通過 <img> 引入（基礎(chǔ)版）

適用于簡單場景，但無法動態(tài)修改樣式。

<template>
  <img src="@/assets/icons/home.svg" alt="首頁" width="24" height="24">
</template>

優(yōu)點：簡單快捷
缺點：無法通過 CSS 修改顏色/樣式；多次使用產(chǎn)生額外 HTTP 請求。

方案二：使用 vue-svg-loader（轉(zhuǎn)為 Vue 組件）

將 SVG 轉(zhuǎn)換為可復(fù)用的 Vue 組件。

步驟：

安裝 loader

npm install vue-svg-loader svgo-loader --save-dev
# 或
yarn add vue-svg-loader svgo-loader -D

配置 vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons')) // 排除原文件夾處理規(guī)則
      .end();

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons')) // 指定 SVG 目錄
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({ 
        svgo: { plugins: [{ removeViewBox: false }] } // 保留 viewBox 屬性
      });
  }
};

組件中使用

<template>
  <HomeIcon class="icon" />
</template>

<script>
import HomeIcon from '@/icons/home.svg';

export default {
  components: { HomeIcon }
}
</script>

<style scoped>
.icon {
  fill: #42b983; /* 直接修改填充色 */
  transition: fill 0.3s;
}
.icon:hover {
  fill: #ff7e67;
}
</style>

優(yōu)點：完全支持 Vue 響應(yīng)式樣式
缺點：每個圖標(biāo)需單獨引入

方案三：使用 svg-sprite-loader（雪碧圖方案）

合并所有 SVG 為單個雪碧圖，通過 <use> 引用。

步驟：

安裝依賴

npm install svg-sprite-loader --save-dev

配置 vue.config.js

module.exports = {
  chainWebpack: (config) => {
    // 默認(rèn) SVG 規(guī)則排除 icons 目錄
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/icons'))
      .end();

    // 添加 icons 目錄專屬規(guī)則
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, 'src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' }); // symbolId 命名規(guī)則
  }
};

創(chuàng)建全局組件 SvgIcon.vue

<template>
  <svg :class="className" aria-hidden="true">
    <use :xlink:href="`#icon-${name}`" rel="external nofollow"  />
  </svg>
</template>

<script>
export default {
  props: {
    name: { type: String, required: true },  // SVG 文件名
    className: String                       // 自定義樣式類
  }
};
</script>

在入口文件（如 main.js）自動導(dǎo)入所有 SVG

const req = require.context('./icons', false, /\.svg$/);
req.keys().map(req);

組件中使用

<template>
  <SvgIcon name="home" class="custom-class" />
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: { SvgIcon }
}
</script>

方案四：使用 unplugin-icons（自動化最優(yōu)解）

基于按需導(dǎo)入的現(xiàn)代解決方案，無需手動管理 SVG 文件。

步驟：

安裝依賴

npm install -D unplugin-icons @iconify/json
# 或
yarn add -D unplugin-icons @iconify/json

配置 vite.config.js / vue.config.js

// Vite 配置 (vite.config.js)
import Icons from 'unplugin-icons/vite';

export default {
  plugins: [
    Vue(), 
    Icons({ compiler: 'vue3' }) // 'vue2' for Vue 2
  ]
};

在組件中直接使用（按需導(dǎo)入）

<template>
  <div>
    <!-- 直接使用 Iconify 圖標(biāo)名 -->
    <Icon icon="mdi:home" width="24" />
    
    <!-- 使用本地 SVG -->
    <Icon icon="custom:home" :path="customSvgPath" />
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue';

// 本地 SVG 示例
const customSvgPath = `
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> 
`;
</script>

動態(tài)修改樣式

<template>
  <Icon icon="mdi:email" class="icon-style" />
</template>

<style>
.icon-style {
  color: #3498db;  /* 修改顏色 */
  font-size: 2em;  /* 調(diào)整大小 */
  transition: all 0.3s;
}
.icon-style:hover {
  color: #e74c3c;
  transform: rotate(15deg);
}
</style>

核心優(yōu)勢：

按需自動加載（無多余代碼）
支持 10,000+ 開源 Iconify 圖標(biāo)集
本地/遠(yuǎn)程 SVG 統(tǒng)一管理
極致開發(fā)體驗（HMR 熱更新）

各方案對比表

方案	按需加載	樣式控制	維護成本	適用場景
<img> 標(biāo)簽	?	?	★☆☆☆☆	簡單靜態(tài)場景
vue-svg-loader	部分	?	★★★☆☆	少量自定義圖標(biāo)
svg-sprite-loader	?	?	★★★★☆	中大型項目
unplugin-icons	?	?	★★★★★	現(xiàn)代化項目首選方案

最佳實踐建議

小型項目 → 使用 vue-svg-loader 快速起步
中大型項目 → 采用 svg-sprite-loader 或 unplugin-icons
圖標(biāo)庫依賴 → 優(yōu)先選擇 unplugin-icons + Iconify 生態(tài)
性能優(yōu)化：
- 使用 SVGO 壓縮 SVG（在線工具）
- 通過 ?raw 避免 URL 編碼問題（Vite）
- 動態(tài)加載非核心圖標(biāo)（import() + 骨架屏）