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?Fiber?樹思想解決業(yè)務(wù)實(shí)際場景詳解
這篇文章主要為大家介紹了React?Fiber?樹思想解決業(yè)務(wù)實(shí)際場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Mobx是一個(gè)前端“狀態(tài)管理框架”，狀態(tài)管理就是將分布在各個(gè)組件、各個(gè)模塊中的狀態(tài)的變化，按照一定的規(guī)則，進(jìn)行統(tǒng)一的管理，這篇文章主要介紹了React中如何使用Mobx,需要的朋友可以參考下2023-02-02
react native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例
下面小編就為大家?guī)硪黄猺eact native實(shí)現(xiàn)往服務(wù)器上傳網(wǎng)絡(luò)圖片的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
rematch是對(duì)redux的二次封裝，簡化了redux是使用，極大的提高了開發(fā)體驗(yàn)，這篇文章主要介紹了React狀態(tài)管理器Rematch的使用,需要的朋友可以參考下2022-09-09
在React中使用reduce方法處理復(fù)雜的對(duì)象數(shù)據(jù)
你想了解的是在 React + TypeScript 環(huán)境下，如何用 reduce 方法處理結(jié)構(gòu)更復(fù)雜的對(duì)象數(shù)據(jù)（而非簡單數(shù)組），我會(huì)通過分層拆解 + 實(shí)戰(zhàn)案例的方式，帶你掌握處理復(fù)雜對(duì)象數(shù)據(jù)的核心思2026-02-02
React Hooks - useContetx和useReducer的使用實(shí)例詳解
這篇文章主要介紹了React Hooks - useContetx和useReducer的基本使用,本文通過實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
react?hooks中的useState使用要點(diǎn)
這篇文章主要為大家介紹了react?hooks中的useState使用要點(diǎn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
React無限滾動(dòng)插件react-infinite-scroll-component的配置優(yōu)化技巧
react-infinite-scroll-component是React無限滾動(dòng)插件,簡化滾動(dòng)加載邏輯,支持自定義提示和觸發(fā)距離,兼容移動(dòng)端,體積小巧,適用于列表、聊天等場景,需結(jié)合虛擬滾動(dòng)優(yōu)化性能,本文介紹React無限滾動(dòng)插件react-infinite-scroll-component的配置+優(yōu)化,感興趣的朋友一起看看吧2025-09-09
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
React18系列reconciler從0實(shí)現(xiàn)過程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01