欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)路由攔截功能

    這篇文章主要介紹了React Router V5:使用HOC組件實現(xiàn)路由攔截功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • react中useRef的應用使用詳解

    react中useRef的應用使用詳解

    這篇文章主要介紹了react中useRef的應用使用詳解的相關資料,需要的朋友可以參考下
    2023-05-05
  • React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解

    React中的路由嵌套和手動實現(xiàn)路由跳轉的方式詳解

    這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉的方式,手動路由的跳轉,主要是通過Link或者NavLink進行跳轉的,實際上我們也可以通JavaScript代碼進行跳轉,需要的朋友可以參考下
    2022-11-11
  • 在React中使用SVG的幾種方式

    在React中使用SVG的幾種方式

    在React中,SVG(Scalable?Vector?Graphics)的使用非常普遍,因為它們提供了可伸縮的矢量圖形,這對于現(xiàn)代Web應用來說是非常重要的,以下是幾種常見的在React中使用SVG的方法,每種方法都有其特定的用例和最佳實踐,需要的朋友可以參考下
    2024-11-11
  • React的三大屬性你都知道嗎

    React的三大屬性你都知道嗎

    這篇文章主要為大家詳細介紹了React的三大屬性,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • React手寫tab切換問題

    React手寫tab切換問題

    今天介紹下React手寫tab切換問題,代碼部分包括父文件,子文件及子文件tab樣式,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2021-11-11
  • React中完整實例講解Recoil狀態(tài)管理庫的使用

    React中完整實例講解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
  • 詳解超簡單的react服務器渲染(ssr)入坑指南

    詳解超簡單的react服務器渲染(ssr)入坑指南

    這篇文章主要介紹了詳解超簡單的react服務器渲染(ssr)入坑指南,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • React Hook中useState更新延遲問題及解決

    React Hook中useState更新延遲問題及解決

    這篇文章主要介紹了React Hook中useState更新延遲問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React官方團隊完善原生Hook閉包陷阱

    React官方團隊完善原生Hook閉包陷阱

    這篇文章主要為大家介紹了React官方團隊出手,補齊原生Hook短板閉包陷阱的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07

最新評論