在vue3的項(xiàng)目中使用svg圖標(biāo)并且封裝實(shí)踐

更新時(shí)間：2026年03月26日 17:01:36 作者：Giraffe3

這篇文章主要介紹了在vue3的項(xiàng)目中使用svg圖標(biāo)并且封裝實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

為什么要用svg？如何用？

SVG是一種可縮放矢量圖形（英語(yǔ)：Scalable Vector Graphics，SVG）是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的圖形格式。

SVG由W3C制定，是一個(gè)開(kāi)放標(biāo)準(zhǔn)。針對(duì)一些大型項(xiàng)目組件庫(kù)提供的svg并不夠，我們還需要有極度高的自定義權(quán)限才能滿(mǎn)足項(xiàng)目需要，這時(shí)候自己導(dǎo)入svg圖標(biāo)并且封裝就很有必要

項(xiàng)目準(zhǔn)備

首先需要引入插件

pnpm install vite-plugin-svg-icons -D

配置Vite.config.ts

//引入
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
//引入
import path from "path";


//導(dǎo)入
createSvgIconsPlugin({
      // 指定 SVG 圖標(biāo)目錄（絕對(duì)路徑）
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      // 指定 symbolId 格式
      symbolId: "icon-[dir]-[name]",
      // 自定義插入位置（可選）
      inject: "body-last",
    }),

配置完整代碼，注意一定要引入path模塊

在main.ts入口文件引入

import "virtual:svg-icons-register";

完整代碼（12行代碼）

接著在src/components/icon文件夾下創(chuàng)建一個(gè)svgIcon.vue組件

代碼

<script setup lang="ts">
defineProps({
  name: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: "",
  },
});
</script>

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

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  overflow: hidden;
}
</style>

全局注冊(cè)一下svg組件

//引入組件
import IconSvg from "./components/Icon/IconSvg.vue";
//全局使用組件
app.component("icon-svg", IconSvg);

代碼（第八行和第20行）

用svg組件現(xiàn)在的svg組件已經(jīng)全局注冊(cè)好了直接用icon-svg包裹就行了

這些是我的svg圖標(biāo)和命名

在組件用icon-svg 標(biāo)簽傳入name即可 name的形式一定是

 <!-- 一定要傳入name name用來(lái)指定圖標(biāo)的 沒(méi)有name就找不到圖標(biāo) 
      而且自己導(dǎo)入的svg圖標(biāo)的名字最好小寫(xiě)，不要用中文，容易產(chǎn)生問(wèn)題
       我這個(gè)當(dāng)時(shí)忘記了，你給圖標(biāo)命名什么就寫(xiě)什么我的叫微信就是icon-微信
-->
<icon-svg name="icon-微信" class="icon" />

<template>
  <div class="container">
    <div class="footer-bar">
      <div class="footer-bar-left">
        <span>關(guān)于我們 </span>
        <span>我們的服務(wù)</span>
        <span>每日穿搭推薦</span>
        <span>聯(lián)系我們</span>
      </div>
      <div class="footer-bar-right">
        <!--  -->
        <icon-svg name="icon-微信" class="icon" />
        <icon-svg name="icon-抖音" class="icon" />
        <icon-svg name="icon-抖音 (1)" class="icon" />
        <icon-svg name="icon-telegram" class="icon" />
      </div>
    </div>
    <div class="footer-leagal">
      ? Dress Right 2023, 版權(quán)所有。每日穿搭建議，為您打造舒適與時(shí)尚的穿搭體驗(yàn)。
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  height: 300px;
  padding: 30px 0;
  background-color: #992c2c2c;
  color: #333;
  .footer-leagal {
    padding-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer-bar {
    display: flex;
    .footer-bar-left {
      display: flex;
      flex: 1;
      justify-content: space-evenly;
    }
    .footer-bar-right {
      display: flex;
      justify-content: space-around;
      flex: 1;
      align-items: center;
      svg {
        &:hover {
          transition: all 0.3s ease-in-out;
          color: #992c2c;
          transform: translateY(-5px);
          cursor: pointer;
        }
      }
    }
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1490px;
  }
}
.icon {
  width: 30px;
  height: 30px;
  fill: #000000;
}
</style>

<template>
  <div class="container">
    <div class="footer-bar">
      <div class="footer-bar-left">
        <span>關(guān)于我們 </span>
        <span>我們的服務(wù)</span>
        <span>每日穿搭推薦</span>
        <span>聯(lián)系我們</span>
      </div>
      <div class="footer-bar-right">
        <!--  -->
        <icon-svg name="icon-微信" class="icon" />
        <icon-svg name="icon-抖音" class="icon" />
        <icon-svg name="icon-抖音 (1)" class="icon" />
        <icon-svg name="icon-telegram" class="icon" />
      </div>
    </div>
    <div class="footer-leagal">
      ? Dress Right 2023, 版權(quán)所有。每日穿搭建議，為您打造舒適與時(shí)尚的穿搭體驗(yàn)。
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  height: 300px;
  padding: 30px 0;
  background-color: #992c2c2c;
  color: #333;
  .footer-leagal {
    padding-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer-bar {
    display: flex;
    .footer-bar-left {
      display: flex;
      flex: 1;
      justify-content: space-evenly;
    }
    .footer-bar-right {
      display: flex;
      justify-content: space-around;
      flex: 1;
      align-items: center;
      svg {
        &:hover {
          transition: all 0.3s ease-in-out;
          color: #992c2c;
          transform: translateY(-5px);
          cursor: pointer;
        }
      }
    }
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1490px;
  }
}
.icon {
  width: 30px;
  height: 30px;
  fill: #000000;
}
</style>

我的footer組件代碼，給組件加了一點(diǎn)點(diǎn)樣式

效果圖

這樣就能成導(dǎo)入svg圖標(biāo)了

我的svg代碼

微信

<svg t="1745629342056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="948" width="32" height="32"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="949"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="950"></path></svg>

抖音

<svg t="1745629395946" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1092" width="32" height="32"><path d="M259.3792 385.3312m-170.5984 0a170.5984 170.5984 0 1 0 341.1968 0 170.5984 170.5984 0 1 0-341.1968 0Z" fill="#03F9AD" p-id="1093"></path><path d="M403.968 568.4224m-170.5984 0a170.5984 170.5984 0 1 0 341.1968 0 170.5984 170.5984 0 1 0-341.1968 0Z" fill="#F9F90B" p-id="1094"></path><path d="M631.3984 622.2848m-88.6784 0a88.6784 88.6784 0 1 0 177.3568 0 88.6784 88.6784 0 1 0-177.3568 0Z" fill="#0FF420" p-id="1095"></path><path d="M753.0496 565.248m-88.6784 0a88.6784 88.6784 0 1 0 177.3568 0 88.6784 88.6784 0 1 0-177.3568 0Z" fill="#DA0DF7" p-id="1096"></path><path d="M594.0224 369.3568m-223.0272 0a223.0272 223.0272 0 1 0 446.0544 0 223.0272 223.0272 0 1 0-446.0544 0Z" fill="#FF0000" p-id="1097"></path><path d="M901.12 1024h-778.24c-67.584 0-122.88-55.296-122.88-122.88V122.88c0-67.584 55.296-122.88 122.88-122.88h778.24c67.584 0 122.88 55.296 122.88 122.88v778.24c0 67.584-55.296 122.88-122.88 122.88z" fill="#070103" p-id="1098"></path><path d="M829.44 268.0832c-89.7024-0.1024-162.304-72.8064-162.304-162.4064 0-1.024 0.1024-2.048 0.1024-3.072h-72.4992v-19.456c-0.7168 7.3728-1.1264 14.9504-1.1264 22.528s0.4096 15.0528 1.1264 22.528v576.7168h-1.7408c0 89.7024-72.704 162.4064-162.4064 162.4064s-162.4064-72.704-162.4064-162.4064 72.704-162.4064 162.4064-162.4064c36.7616 0 70.5536 12.1856 97.792 32.768v-85.0944a234.496 234.496 0 0 0-97.792-21.1968c-130.3552 0-235.9296 105.6768-235.9296 235.9296 0 130.3552 105.6768 235.9296 235.9296 235.9296s235.9296-105.6768 235.9296-235.9296c0-0.7168 0-1.4336-0.1024-2.1504h0.1024V276.1728a235.4176 235.4176 0 0 0 162.9184 65.536v-73.6256z" fill="#FFFFFF" p-id="1099"></path></svg>

抖音1

<svg t="1745629416752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1245" width="32" height="32"><path d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z" fill="#111111" p-id="1246"></path><path d="M204.27776 670.59712a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V134.35904h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z" fill="#FF4040" p-id="1247"></path><path d="M164.92544 631.23456a246.25152 246.25152 0 0 1 245.97504-245.97504v147.57888a98.49856 98.49856 0 0 0-98.38592 98.38592c0 48.34304 26.14272 100.352 83.54816 100.352 3.81952 0 93.55264-0.88064 93.55264-77.19936V94.99648h157.26592a133.31456 133.31456 0 0 0 133.12 132.99712l-0.13312 147.31264a273.152 273.152 0 0 1-142.62272-38.912l-0.06144 317.98272c0 146.00192-124.24192 224.77824-241.14176 224.77824-131.74784 0.03072-231.1168-106.56768-231.1168-247.92064z" fill="#00F5FF" p-id="1248"></path><path d="M410.91072 427.58144c-158.8224 20.15232-284.44672 222.72-154.112 405.00224 120.40192 98.47808 373.68832 41.20576 380.70272-171.85792l-0.17408-324.1472a280.7296 280.7296 0 0 0 142.88896 38.62528V261.2224a144.98816 144.98816 0 0 1-72.8064-54.82496 135.23968 135.23968 0 0 1-54.70208-72.45824h-123.66848l-0.08192 561.41824c-0.11264 78.46912-130.9696 106.41408-164.18816 30.2592-83.18976-39.77216-64.37888-190.9248 46.31552-192.57344z" fill="#FFFFFF" p-id="1249"></path></svg>

<svg t="1745629433453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="32" height="32"><path d="M679.424 746.862l84.005-395.996c7.424-34.852-12.581-48.567-35.438-40.009L234.277 501.138c-33.72 13.13-33.134 32-5.706 40.558l126.282 39.424 293.156-184.576c13.714-9.143 26.295-3.986 16.018 5.157L426.898 615.973l-9.143 130.304c13.13 0 18.871-5.706 25.71-12.581l61.696-59.429 128 94.282c23.442 13.129 40.01 6.29 46.3-21.724zM1024 512c0 282.843-229.157 512-512 512S0 794.843 0 512 229.157 0 512 0s512 229.157 512 512z" fill="#1296DB" p-id="1396"></path></svg>