Icons – Google Fonts

Re:Icons – Google Fonts by tobyhinloopen on Wednesday March 03, 2021 @06:40AM (#26327136)

That SVG does have to be inline though, which drastically increases your HTML page’s size. You cannot style an SVG loaded in an IMG element.

Imagine rendering 50 rows with each 6 icons, 1kb each. There are 6 unique icons, so it’s only 6kb each loading them from the server, but inline you’ll have 300kb of SVG icons

[ Parent | on HN ]

Re:Icons – Google Fonts by DangerousPie on Wednesday March 03, 2021 @06:42AM (#26327156)

You can use an "SVG sprite" with <use>. No need to inline the SVG every time.

[ Parent | on HN ]

Re:Icons – Google Fonts by tobyhinloopen on Wednesday March 03, 2021 @06:54AM (#26327246)

Oh? I have to look that up

[ Parent | on HN ]

Re:Icons – Google Fonts by DangerousPie on Wednesday March 03, 2021 @06:58AM (#26327259)

Took me a while to figure it all out, but it works surprisingly well. I have been using https://icomoon.io/ to generate the sprites. They also provide a JS polyfill to support IE.

[ Parent | on HN ]

Re:Icons – Google Fonts by faeyanpiraat on Wednesday March 03, 2021 @07:32AM (#26327523)

But how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?

[ Parent | on HN ]

Re:Icons – Google Fonts by 8lall0 on Wednesday March 03, 2021 @08:16AM (#26327869)

You can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work.

Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner.

The greatest advantage is that you can reference externally your svg with xlink.href on top of your website: you have to make one more request, but it's cacheable. Pick your tradeoff :)

[ Parent | on HN ]

Re:Icons – Google Fonts by nikkwong on Wednesday March 03, 2021 @02:05PM (#26332893)

You're saying you can embed all the SVGs onto one page, and then reference them on other pages/domains by using xlink.href? I haven't heard of this?

So what you're describing is having site.com/page1 which has markup: <body> <svg id="icon-1"> ... </svg> </body>

and then on site.com/page2 having

Or something of this manner? Haven't encountered this, but sounds awesome; especially since you'd get the power of both inlining and caching the asset.

[ Parent | on HN ]

Re:Icons – Google Fonts by jarek-foksa on Wednesday March 03, 2021 @07:52AM (#26327677)

This should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".

[ Parent | on HN ]

Re:Icons – Google Fonts by f-word on Wednesday March 03, 2021 @10:22AM (#26329465)

Either fill: currentColor or fill: var(--iconColor, currentColor) should do the trick. I prefer the 2nd one because it lets me change iconColor whenever I find it appropiate

[ Parent | on HN ]

Re:Icons – Google Fonts by jarek-foksa on Wednesday March 03, 2021 @07:50AM (#26327656)

You can also use Boxy SVG to create and edit SVG sprites: https://boxy-svg.com/#tour-symbols

[ Parent | on HN ]

Re:Icons – Google Fonts by reaperducer on Wednesday March 03, 2021 @10:54AM (#26330013)

Boxy says "15 day free trial" but there's no information about how much it costs.

Dora anyone know? I'm not going to sign up for something without knowing what I'm getting into.

[ Parent | on HN ]

Re:Icons – Google Fonts by jarek-foksa on Wednesday March 03, 2021 @11:30AM (#26330649)

Linux desktop app is free, macOS desktop app costs 9.99 USD (one-time payment), web app costs 9.99 USD / year (no cloud services) or 9.99 USD / month (with cloud services). The complete pricing table is shown in the footer area of the home page when you open it with a Chromium-based browser.

[ Parent | on HN ]

Re:Icons – Google Fonts by jefftk on Wednesday March 03, 2021 @01:21PM (#26332378)

> when you open it with a Chromium-based browser

Looks like they're using the experimental CSSStyleSheet() constructor [1] to display the pricing table. Ugh.

[1] https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleShe...

[ Parent | on HN ]

Re:Icons – Google Fonts by jessaustin on Wednesday March 03, 2021 @03:10PM (#26333735)

Someone has to push us to the future! Why wouldn't a business be happy to exclude 30% of browsers?

https://www.npmjs.com/package/construct-style-sheets-polyfil...

[ Parent | on HN ]

Re:Icons – Google Fonts by leipert on Wednesday March 03, 2021 @02:15PM (#26333006)

We are using this at GitLab: https://gitlab-org.gitlab.io/gitlab-svgs/, using svg-sprite to build the sprite file: https://www.npmjs.com/package/svg-sprite

[ Parent | on HN ]

Re:Icons – Google Fonts by Mauricebranagh on Wednesday March 03, 2021 @06:54AM (#26327247)

compared to the massive Js CSS and Images included on almost all 99.9% of pages a bit of SVG is trivial.

[ Parent | on HN ]

Re:Icons – Google Fonts by d0gbread on Wednesday March 03, 2021 @09:35AM (#26328787)

Everything's a bit in isolation, that's how they get ya. Easily to bulk up, hard to trim back down.

[ Parent | on HN ]

Re:Icons – Google Fonts by Mauricebranagh on Wednesday March 03, 2021 @10:03AM (#26329220)

sigh tell me about it

[ Parent | on HN ]

Re:Icons – Google Fonts by Aeolun on Wednesday March 03, 2021 @08:04AM (#26327774)

1kb is a lot for a simple svg icon.

That said, if you have a single page app already, you can render as many icons as you want, since you’ll only download them once anyway.

[ Parent | on HN ]

Re:Icons – Google Fonts by kps on Wednesday March 03, 2021 @10:05AM (#26329246)

But if you want 5 icons, 5K of SVG beats 55K of WOFF.

[ Parent | on HN ]

Re:Icons – Google Fonts by tobyhinloopen on Wednesday March 03, 2021 @11:18AM (#26330432)

I wonder how React copes with a whole bunch of inline SVGs. Seems expensive

[ Parent | on HN ]

Re:Icons – Google Fonts by RobertKerans on Wednesday March 03, 2021 @12:55PM (#26332011)

Copes totally fine and it's trivial to memoise them anyway.

[ Parent | on HN ]

Re:Icons – Google Fonts by duhi88 on Wednesday March 03, 2021 @10:59AM (#26330113)

Most icons are generally tiny. Millage will vary, but they can speed up your site. Fewer requests for a slightly large page size.

[ Parent | on HN ]