VUE3 加載自定義SVG文件的詳細(xì)步驟
網(wǎng)上代碼通篇一律，需要修改多處地方，特別是component下還要?jiǎng)?chuàng)建一個(gè)index.vue的組件，奇奇怪怪。
要在 Vue 項(xiàng)目中使用 svg-sprite-loader 來(lái)管理 SVG 圖標(biāo)，你需要執(zhí)行以下幾個(gè)步驟：
npm install svg-sprite-loader -D
步驟 1: 配置 vue.config.js
確保你的 Vue 項(xiàng)目的根目錄中有一個(gè) vue.config.js 文件，用于自定義 Vue CLI 的內(nèi)部 webpack 配置。如果文件不存在，你可以創(chuàng)建一個(gè)。在這個(gè)文件中，添加以下配置：
const path = require('path');
module.exports = {
chainWebpack: config => {
// SVG 規(guī)則排除 icons 目錄
config.module.rule('svg')
.exclude.add(path.resolve('src/assets/icons'))
// 添加 icons 目錄的 SVG loader
config.module.rule('icons')
.test(/\.svg$/)
.include.add(path.resolve('src/assets/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
}
};這個(gè)配置告訴 webpack 對(duì)于 src/assets/icons 目錄中的 .svg 文件，使用 svg-sprite-loader 來(lái)處理它們。其他目錄中的 .svg 文件將使用項(xiàng)目中默認(rèn)的 SVG loader。
步驟 2: 添加 SVG 圖標(biāo)
將你的 SVG 圖標(biāo)放置在 src/assets/icons 目錄中。例如，你可以有一個(gè)名為 example.svg 的圖標(biāo)。
一個(gè)簡(jiǎn)單的 SVG 圖標(biāo)可能看起來(lái)像這樣：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>步驟 3: 全局引入 SVG 圖標(biāo)
在項(xiàng)目的入口文件（通常是main.js或 main.ts）中添加全局 SVG 導(dǎo)入。例如：
import { createApp } from 'vue';
import App from './App.vue';
// 導(dǎo)入 SVG 圖標(biāo)
const req = require.context('./assets/icons', false, /\.svg$/);
const requireAll = context => context.keys().map(context);
requireAll(req);
createApp(App).mount('#app');步驟 4: 使用 SVG 圖標(biāo)
在你的組件中，你應(yīng)該能夠通過(guò) symbolId 引用 SVG 圖標(biāo)，就像這樣：
<template>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-example" rel="external nofollow" ></use>
</svg>
</template>其中 icon-example 是你的 SVG 文件名。
步驟 5: 重新編譯
現(xiàn)在，你可以在任何組件中使用這些 SVG 圖標(biāo)。圖標(biāo)的 ID 將基于文件名，例如 icon-example 對(duì)應(yīng)于 example.svg 文件。
請(qǐng)注意，這些步驟假設(shè)你的 Vue 項(xiàng)目是基于 Vue CLI 創(chuàng)建的。如果你的項(xiàng)目結(jié)構(gòu)有所不同，可能需要相應(yīng)地調(diào)整配置和路徑。
到此這篇關(guān)于VUE3 加載自定義SVG文件的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)VUE3 加載自定義SVG文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在現(xiàn)代前端開(kāi)發(fā)中,組件的重用性和異步加載是提升用戶體驗(yàn)和優(yōu)化性能的關(guān)鍵因素,在Vue 3中,創(chuàng)建異步組件變得更為便利,本文將探討如何在Vue 3中使用setup語(yǔ)法糖來(lái)創(chuàng)建異步組件,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-09-09
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會(huì)發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來(lái)講解 .sync的含義及用法。2021-05-05
本篇文章主要介紹了vue-loader，vue-loader是webpack下loader插件 可以把.vue文件輸出成組件，有興趣的可以了解一下2017-06-06
項(xiàng)目部署后前端vue代理失效問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于項(xiàng)目部署后前端vue代理失效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程
這篇文章主要給大家介紹了關(guān)于利用vue + koa2 + mockjs模擬數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件
這篇文章主要為大家詳細(xì)介紹了vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
在?Vue?開(kāi)發(fā)中,父子組件間的通信是高頻場(chǎng)景,當(dāng)需要在父組件中直接調(diào)用子組件的方法時(shí),模板引用（Template?Refs）是最直接的解決方案,本文將通過(guò)一段?Vue?3?代碼片段,深入剖析如何通過(guò)?TypeScript?實(shí)現(xiàn)類(lèi)型安全的子組件實(shí)例訪問(wèn),需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個(gè) mixin 方法，這個(gè)方法會(huì)在每個(gè)組件創(chuàng)建之前被調(diào)用，我們可以在這個(gè)方法中將 VueRouter 實(shí)例掛載到 Vue 實(shí)例上，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue如何在新窗口打開(kāi)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果實(shí)例代碼
本文通過(guò)一段簡(jiǎn)單的代碼給大家介紹了基于純vue實(shí)現(xiàn)側(cè)邊菜單欄手風(fēng)琴效果，代碼很簡(jiǎn)單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05