快捷導(dǎo)航

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

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

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

SVG 圖標(biāo)因其矢量特性、高清晰度及樣式易定制等優(yōu)勢(shì)，已成為現(xiàn)代 Web 開(kāi)發(fā)的首選。在 Vue 項(xiàng)目中優(yōu)雅地引入 SVG 圖標(biāo)可通過(guò)多種方案實(shí)現(xiàn)，下面將詳細(xì)解析四種主流方案。

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

適用于簡(jiǎn)單場(chǎng)景，但無(wú)法動(dòng)態(tài)修改樣式。

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

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

方案二：使用 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)點(diǎn)：完全支持 Vue 響應(yīng)式樣式
缺點(diǎn)：每個(gè)圖標(biāo)需單獨(dú)引入

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

合并所有 SVG 為單個(gè)雪碧圖，通過(guò) <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òng)導(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（自動(dòng)化最優(yōu)解）

基于按需導(dǎo)入的現(xiàn)代解決方案，無(wú)需手動(dòng)管理 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>

動(dòng)態(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)勢(shì)：

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

各方案對(duì)比表

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

最佳實(shí)踐建議

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