react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件
在react + vite + ts項(xiàng)目中svg文件的基本使用
1、直接在JSX組件中引入SVG文件
使用img標(biāo)簽，img標(biāo)簽的src代碼嵌入到JSX組件中，例如：
// XXcomponent.tsx
import help_icon from '@/icon/help_icon.svg';
function MySVGComponent() {
return (
<img src={help_icon} alt="" />
);
}
export default MySVGComponent;1這種使用方法有很多重復(fù)的代碼，而且不好維護(hù)，我們希望至少能夠重復(fù)使用引用一次的svg文件，將svg資源封裝成組件，方法見2。
2、安裝vite-plugin-svgr插件
修改配置，將SVG文件作為React組件導(dǎo)入
2.1 安裝vite-plugin-svgr
npm i vite-plugin-svgr -D
2.2 在vite配置文件中注冊(cè)已安裝的vite-plugin-svgr插件
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
export default defineConfig({
plugins: [react(), svgr()]
});2.3 配置ts.config.json
// ts.config.json 添加"types": ["vite-plugin-svgr/client"] 這項(xiàng)配置
{
"compilerOptions": {
"types": ["vite-plugin-svgr/client"]
}
}2.4 使用
// XXcomponent.tsx
import { ReactComponent as HelpIcon } from '@/icon/help_icon.svg';
function MySVGComponent() {
return (
<HelpIcon />
);
}
export default MySVGComponent;
3、節(jié)省引入"path/to/icon_xx.svg"
在2的基礎(chǔ)上進(jìn)行封裝，節(jié)省引入"path/to/icon_xx.svg"的步驟。
思路是將所有的icon_xx.svg放在src/icon 目錄下
封裝一個(gè)<SvgIcon /> 組件 <SvgIcon />的Props中iconName對(duì)應(yīng)icon_xx.svg的名稱。
import(@/icon/${iconName}.svg)在需要使用svg的地方引入<SvgIcon />組件。
這種思路有點(diǎn)類似于vue2中的svg-sprite-loader，只是沒有注冊(cè)在全局。
以上就是react + vite + ts項(xiàng)目中優(yōu)雅使用.svg文件的詳細(xì)內(nèi)容，更多關(guān)于react vite ts使用.svg的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
用表格進(jìn)行頁(yè)面布局,頁(yè)面布局在各種瀏覽器的的兼容性, 本文主要介紹了詳解React中合并單元格的正確寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
react中hooks使用useState的更新不觸發(fā)dom更新問題及解決
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要介紹了React 三大核心屬性，主要包括State屬性，Props屬性，Refs屬性，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了詳解react關(guān)于事件綁定this的四種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了React Router v4 入坑指南(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了React中多語言的配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下2021-04-04
詳解使用WebPack搭建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08