react批量引入svg圖標(biāo)的方法
更新時(shí)間：2024年03月12日 14:23:26 作者：#做一個(gè)清醒的人
這篇文章主要介紹了react批量引入svg圖標(biāo)的方法,在批量引入之前,我們需要安裝一個(gè)包并配置到typescript.json文件中,需要的朋友可以參考下
在批量引入之前，我們需要安裝一個(gè)包并配置到typescript.json文件中。
1. 安裝：
yarn add -D @type/webpack-env
2. 配置typescript.json
"compilerOptions": {
"types": ["@types/webpack-env"]
}批量引入處理并導(dǎo)出封裝組件
在src文件下新建一個(gè)icon文件，然后新建一個(gè).tsx文件
注：這塊代碼可直接copy走
import Icon from '@ant-design/icons';
// 批量引入
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
const requireAll = requireContext.keys().map(key => {
const name = key.replace(/\.\/(.*)\.\w+$/, '$1');
console.log(name, requireContext(key))
return { name, value: requireContext(key) };
})
return requireAll
}
let routeList: {name: string, value: string}[] = []
try {
routeList = importAll(require.context('../assets/icons', true, /\.svg$/))
} catch (error) {
console.log(error);
routeList = []
}
/**
*
* 導(dǎo)出圖標(biāo)
*
*/
const IconFont = (props: {name: string, width?: string | number, className?: string}) => {
const ListItem = routeList.find(item => item.name === props.name)
return (
<Icon
component={() => (
<img
src={ListItem?.value}
alt=""
width={props.width || 16}
/>
)}
{...props}
/>
);
};
export {
IconFont
}使用方式：
// 引入圖標(biāo)
import { IconFont } from '@/icons/sider_left_icon'
<IconFont
name='library'
width="23"
className={styles.library_button_icon}
/>注：我之所以能直接使用@去默認(rèn)引入src下的所有文件，是因?yàn)槲以趖ypescript中配置path
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
},
"types": ["@types/webpack-env"]
},詳細(xì)了解@types/webpack-env，可點(diǎn)擊鏈接查看
到此這篇關(guān)于react批量引入svg圖標(biāo)的文章就介紹到這了,更多相關(guān)react批量引入svg內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截功能
這篇文章主要介紹了React Router V5:使用HOC組件實(shí)現(xiàn)路由攔截功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下2023-05-05
React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn)，主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的，實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)，需要的朋友可以參考下2022-11-11
在React中,SVG（Scalable?Vector?Graphics）的使用非常普遍,因?yàn)樗鼈兲峁┝丝缮炜s的矢量圖形,這對(duì)于現(xiàn)代Web應(yīng)用來(lái)說(shuō)是非常重要的,以下是幾種常見(jiàn)的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實(shí)踐,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了React的三大屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
今天介紹下React手寫(xiě)tab切換問(wèn)題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
React中完整實(shí)例講解Recoil狀態(tài)管理庫(kù)的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫(kù)的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個(gè)可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實(shí)現(xiàn)的過(guò)程中，因?yàn)楝F(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對(duì)Recoil感興趣可以參考下文2023-05-05
詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南
這篇文章主要介紹了詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
React Hook中useState更新延遲問(wèn)題及解決
這篇文章主要介紹了React Hook中useState更新延遲問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React官方團(tuán)隊(duì)完善原生Hook閉包陷阱
這篇文章主要為大家介紹了React官方團(tuán)隊(duì)出手，補(bǔ)齊原生Hook短板閉包陷阱的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07