javascript - 生成图标
问题描述
我正在使用反应图标,我正在查看index.js
文件......这一段代码到底在做什么?AI 看到我们正在创建一个 JSON 对象,但就数值而言呢?#Explaintomelikeim5
module.exports.FaSearch = function (props) {
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
解决方案
如果您转到文件顶部,您应该会看到它从 ../lib 导入。我将函数跟踪到 ../lib/esm/iconbase。我猜和我一样,您正在尝试创建此模块的精简版本。我能够复制文件并输入创建所需图标所需的选定“图标属性”,而不会大大降低我的网站速度。
如果您只需要创建一组动态较少输入的图标,请尝试此...
import React from 'react'
import * as IconApi from 'react-icons/Si';
import { UUIDv4 } from "uuid-v4-validator";
import styled from 'styled-components';
const getKey = new UUIDv4()
const list =[
{
name: 'github',
icon:'SiGithub'
},
{
name:'upwork',
icon:'SiUpwork'
},
{
name:'Linked In',
icon:'SiLinkedin'
},
{
name:'Gmail',
icon:'SiGmail'
},
{
name:'resume',
icon: 'SiMicrosoftword'
}
]
list.map((index) =>{
const newIcon = React.createElement(IconApi[index.icon]);
return(
<>
<ListedIcons className='contactIcons'
key={Math.random(getKey)} >
{newIcon }
<span className='IconSpan'>{index.name} </span>
</ListedIcons>
</>
);
}
推荐阅读
- node.js - 如何在猫鼬中填充具有对象数组的对象?
- python-3.x - 如何从我的数据框中删除方括号?
- mongodb - 如何在 mongodb 的查询中使用?
- javascript - JS for循环中的局部变量到全局变量,循环结束后值改变
- pandas - pandas: .to_dict('records') 导致奇数键
- python - 为什么 reduce 返回一个列表而不是单个值?
- reactjs - 使用inkscape创建图标并使用材质ui SvgIcon导入它
- python - 在测试用例中使用 create_all 时获取 AttributeError
- angular - 如何将来自后端的异步数据从子组件发送到父组件
- android - 密封类中的对象定义应该以大写还是小写字母开头?