react批量引入svg圖標的方法
更新時間:2024年03月12日 14:23:26 作者:#做一個清醒的人
這篇文章主要介紹了react批量引入svg圖標的方法,在批量引入之前,我們需要安裝一個包并配置到typescript.json文件中,需要的朋友可以參考下
在批量引入之前,我們需要安裝一個包并配置到typescript.json文件中。
1. 安裝: yarn add -D @type/webpack-env 2. 配置typescript.json "compilerOptions": { "types": ["@types/webpack-env"] }
批量引入處理并導出封裝組件
在src文件下新建一個icon文件,然后新建一個.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 = [] } /** * * 導出圖標 * */ 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 }
使用方式:
// 引入圖標 import { IconFont } from '@/icons/sider_left_icon' <IconFont name='library' width="23" className={styles.library_button_icon} />
注:我之所以能直接使用@去默認引入src下的所有文件,是因為我在typescript中配置path
"compilerOptions": { "paths": { "@/*": ["./src/*"] }, "types": ["@types/webpack-env"] },
詳細了解@types/webpack-env,可點擊鏈接查看
到此這篇關于react批量引入svg圖標的文章就介紹到這了,更多相關react批量引入svg內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React Router V5:使用HOC組件實現(xiàn)路由攔截功能
這篇文章主要介紹了React Router V5:使用HOC組件實現(xiàn)路由攔截功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉的方式,手動路由的跳轉,主要是通過Link或者NavLink進行跳轉的,實際上我們也可以通JavaScript代碼進行跳轉,需要的朋友可以參考下2022-11-11React中完整實例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用,Recoil的產(chǎn)生源于Facebook內(nèi)部一個可視化數(shù)據(jù)分析相關的應用,在使用React的實現(xiàn)的過程中,因為現(xiàn)有狀態(tài)管理工具不能很好的滿足應用的需求,因此催生出了Recoil,對Recoil感興趣可以參考下文2023-05-05