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資源封裝成組件，方法見(jiàn)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，只是沒(méi)有注冊(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中如何使用局部樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
React中常見(jiàn)的TypeScript定義實(shí)戰(zhàn)教程
這篇文章主要介紹了React中常見(jiàn)的TypeScript定義實(shí)戰(zhàn),本文介紹了Fiber結(jié)構(gòu)，F(xiàn)iber的生成過(guò)程，調(diào)和過(guò)程，以及 render 和 commit 兩大階段，需要的朋友可以參考下2022-10-10
React styled-components設(shè)置組件屬性的方法
這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vite+React搭建開(kāi)發(fā)構(gòu)建環(huán)境實(shí)踐記錄
這篇文章主要介紹了Vite+React搭建開(kāi)發(fā)構(gòu)建環(huán)境實(shí)踐,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
本文主要介紹了React里的Fragment標(biāo)簽的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
React Hooks獲取數(shù)據(jù)實(shí)現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據(jù),文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進(jìn)行綁定，實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了React新文檔濫用effect出現(xiàn)的問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了React手寫(xiě)redux過(guò)程，目前redux在react中使用是最多的，所以我們需要將之前編寫(xiě)的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題
這篇文章主要介紹了React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03