react批量引入svg图标的方法
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
在批量引入之前,我们需要安装一个包并配置到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内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
React?Refs?的使用forwardRef?源码示例解析
这篇文章主要为大家介绍了React?之?Refs?的使用和?forwardRef?的源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08React函数式组件Hook中的useState函数的详细解析
Hook 就是 JavaScript 函数,这个函数可以帮助你钩入(hook into) React State以及生命周期等特性,这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下2022-10-10详解create-react-app 2.0版本如何启用装饰器语法
这篇文章主要介绍了详解create-react-app 2.0版本如何启用装饰器语法,cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的2018-10-10
最新评论