search

freepik-company / flaticon-uicons

Over 4,000 SVG and web font-optimal vector-based icons available for web, iOS, and Android applications from www.flaticon.com
Other
59 stars 16 forks source link

How to import only used icons? #20

Closed leoplct closed 4 months ago

leoplct commented 11 months ago

I have this to include the whole styles

<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.0.0/uicons-thin-straight/css/uicons-thin-straight.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.0.0/uicons-thin-rounded/css/uicons-thin-rounded.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css'>

but in my code, I only use a few icons like

<i class="fi fi-ts-toggle-on" />
<i class="fi-tr-bullseye-arrow" />
<i class="fi-rr-bolt" />
<i class="fi-rr-eye-crossed" />

this negatively impacts our performance and lighthouse because we have lots of unused CSS. How can I import only a few icons?

Screenshot 2023-11-09 at 11 07 30

RohanMishra315 commented 10 months ago

hey @leoplct You can use these code to import only the icons you need and reduce the impact on performance, you can use the @import rule in CSS to import specific CSS files for the icons you want to use.

carloschneider commented 6 months ago

hey @leoplct You can use these code to import only the icons you need and reduce the impact on performance, you can use the @import rule in CSS to import specific CSS files for the icons you want to use.

Still not performatic. Importing this way you'll import all thin-rounded icons for example, and I believe that no one use all icons in a project. Thats the point.

It would be nice to have the SVG files in the repository, that way we could be able to import only icons we need

konchimartin commented 4 months ago

Hey @leoplct we don't have that functionality at the moment. We may implement it in the future :space_invader: . Thanks for the input :raised_hands: .