欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE3 加載自定義SVG文件的詳細(xì)步驟

 更新時間：2024年01月28日 12:25:04   作者：fendouweiqian  
要在 Vue 項(xiàng)目中使用 svg-sprite-loader 來管理 SVG 圖標(biāo),需要執(zhí)行相應(yīng)的步驟,接下來通過本文給大家介紹VUE3 加載自定義SVG文件的詳細(xì)步驟,感興趣的朋友一起看看吧

網(wǎng)上代碼通篇一律，需要修改多處地方，特別是component下還要創(chuàng)建一個index.vue的組件，奇奇怪怪。

要在 Vue 項(xiàng)目中使用 svg-sprite-loader 來管理 SVG 圖標(biāo)，你需要執(zhí)行以下幾個步驟：

npm install svg-sprite-loader -D

步驟 1: 配置 vue.config.js

確保你的 Vue 項(xiàng)目的根目錄中有一個 vue.config.js 文件，用于自定義 Vue CLI 的內(nèi)部 webpack 配置。如果文件不存在，你可以創(chuàng)建一個。在這個文件中，添加以下配置：

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]' })
  }
};

這個配置告訴 webpack 對于 src/assets/icons 目錄中的 .svg 文件，使用 svg-sprite-loader 來處理它們。其他目錄中的 .svg 文件將使用項(xiàng)目中默認(rèn)的 SVG loader。

步驟 2: 添加 SVG 圖標(biāo)

將你的 SVG 圖標(biāo)放置在 src/assets/icons 目錄中。例如，你可以有一個名為 example.svg 的圖標(biāo)。

一個簡單的 SVG 圖標(biāo)可能看起來像這樣：

<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)該能夠通過 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 對應(yīng)于 example.svg 文件。

請注意，這些步驟假設(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論