How to use icons properly?

🙋Get Help
1

How should I use icons? I want to use icons on my website but the catch is I want them conditional like I want to add social links and I only want icons I’ve in the state like:

social: [
    [
          "Facebook",
          "https://fb.com/username",
    ],
    [
          "Twitter",
          "https://twitter.com/username",
    ]
]

But I want if I’ve to add/remove a social link I haven’t to add it manually in code but simply change it in the state.
Like I can do that using font awesome library like:

...,
[
     "Facebook",
     "https://fb.com/username",
     "fa fa-facebook"
],

But this is the ugly method of loading the whole CDN library and the other method is I simply add svg code here still looks bad and prohibited in docs that state size shouldn’t be big.

What’s your workaround here?

3

Hi @inamkbmail

Thanks for your enquiry and apologies for the delay in responding. We’ll investigate possible options and get back to you soon.

4

ok let me know about that

6

Hi @inamkbmail

Here’s a couple of approaches. Font Awesome allows you to create subsets of icons to reduce file size and even just import the icons you need into your project. Take a look at:

https://fontawesome.com/how-to-use/with-the-api/setup/library

Another possibility is to create the svg/jpeg/png icons you need and store them in an assets folder. See https://github.com/chakra-ui/frontity-chakra-ui-theme for an example of this approach.

Hope this helps.

8

TY for help.
I wanted something like dynamic imports for icons based on theme config in index.js.
I found https://react-icons.netlify.com/ very helpful.
But idea like dynamic imports isn’t cool now.

10

That looks similar to subsetting as described at the bottom of the page I linked above: https://fontawesome.com/how-to-use/with-the-api/setup/library#subsetting

1 Like
11

Yes, be aware of react-icons. It is poorly designed.

@alexaspalato had some problems in her theme because of it:

She finally moved to react-icons-kit which is fine. Code changes are here:

12

A post was split to a new topic: How can I implement Social Icons in my Frontity project?