0

I am using react icons and I am taking a look at the index.js file...What the heck is this one chunk of code even doing? AI see we are creating a JSON object, but as far as the number values go? #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);
3
  • Where is this code coming from?
    – Jerodev
    Aug 9, 2018 at 14:09
  • 4
    That is SVG, see the SVG tutorial and especially paths.
    – str
    Aug 9, 2018 at 14:09
  • @Jerodev It's from Font Awesome. I was just wondering how that rendered icons.
    – The_Enigma
    Aug 9, 2018 at 15:08

1 Answer 1

0

if You go to the top of the file you should see it import from ../lib. I tracked the function to ../lib/esm/iconbase. I'm guessing just like me you are trying to create a slimmed down version of this module. I was able to copy the file and input the selected "icon attributes' I needed to create the icons I needed , without drastically slowing down my site.

If you just needed to create a dynamic less typing set of icons try this...

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>
                        
                    </>
                  );
                }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.