Icons in Pure CSS

Icons in Pure CSS

antfu.me antfu.me2 weeks ago in#Dev Love46

中文 Chinese Version In my earlier put up about Reimagine Atomic CSS, I presented a preset of UnoCSS that gives the power to make use of any icons on-demand in purely CSS. Today in this put up, I’d love to proportion with you ways we made it imaginable. My Icon Explorations # If you have an interest in how I am getting right here, there’s an index of my earlier put up concerning the tales of my icon explorations and experiments. Aug. 2020 – Journey with Icons Sep. 2021 – Journey with Icons Continues Oct. 2021 – Reimagine Atomic CSS (The CSS Icons Preset) Nov. 2021 – Icons in Pure CSS – you’re right here! Prior Arts # I do know there’s a Pure CSS icon answer referred to as css.gg, which is a smart concept to make use of pseudo-elements (::ahead of, ::after) to build the icons. However, that might require some skilled wisdom of the way CSS works, however I consider that way might be onerous to create extra advanced icons. Instead of the restricted alternatives in a particular set, I’m in the hunt for a extra common answer that might observe to any icons. The Idea # The concept come from this option request created by way of @husayt to unplugin-icons and the preliminary implementation in this pull request by way of @userquin. The concept here’s relatively simple – to generate CSS with the icons in DataURI because the background symbol. .my-icon { background: url(information:…) no-repeat heart; background-color: clear; background-size: 16px 16px; top: 16px; width: 16px; show: inline-block; } With that, lets use any pictures inlined in CSS with a unmarried elegance. It’s certainly a captivating concept. However, that is extra like a picture as a substitute of an icon. To me, an icon must be scalable and colorable (if it’s monochrome). Make it Work # DataURI # Thanks once more to Iconify, which unified 100 icon units with 10,000 icons into the constant JSON layout. It lets in us to get the SVG of any icon set by way of merely offering the gathering and icon ids. The utilization is like this: import { iconToSVG, getIconKnowledge } from ‘@iconify/utils’ const svg = iconToSVG(getIconKnowledge(‘mdi’, ‘alarm’)) Once we were given the SVG string, lets convert the it to DataURI: const dataUri = `information:symbol/svg xml;base64,${Buffer.from(svg).toString(‘base64’)}` Talking about DataURI, it’s nearly the default selection to make use of Base64 till I learn Probably Don’t Base64 SVG by way of Chris Coyier. Base64 is had to encode binary information like pictures for use in simple textual content recordsdata like CSS, whilst for SVG, because it’s already in textual content layout, the additional encoding to Base64 in fact makes the record length higher. Combine the methodology discussed in Optimizing SVGs in information URIs by way of Taylor Hunt to reinforce the output length, additional, here’s the answer we finally end up with. serve as encodeSvg(svg: string) { go back svg.exchange(‘  » Read More

Like to keep reading?

This article first appeared on antfu.me. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply