Question

我正在使用react图标，并且正在查看index.js文件...这块代码甚至在做什么？我看到我们正在创建一个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);

Answer 1

如果您转到文件顶部，您应该会看到它从 ../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>
                        
                    </>
                  );
                }

生成图标

1 个答案: