twbs/icons

Add DATA URI choice to the individual icon pages

Open

#903 opened on May 29, 2021

View on GitHub
 (2 comments) (2 reactions) (0 assignees)JavaScript (6,955 stars) (1,049 forks)batch import
docsenhancementhelp wanted

Description

Not a bug, rather a feature request.

Using SVG as a data URI for background image has wide support (https://caniuse.com/svg-css) and it would be so handy if an ICON's page showed the right data uri format.

Roughly speaking the format needs to remove the width and height settings and then be encodeURIComponent() encoded (I think.. I'm not 100% confident of the encoding rules for data uri's).

By removing the width/height setting of the SVG element then the SVG's size will be set based on the element it is being applied to.

The data uri format looks like:

background-image: url(data:image/svg+xml;utf8,[...encodeURIComponent() of the SVG element...]);

This could be displayed below the "Copy HTML" section as:

Copy CSS background-image
Paste the CSS right into your project's code.
[background-images... and the copy function]

I put together a mock up at https://imgur.com/a/KvbOpCf (look to the bottom right to see the new Copy CSS block).

I have also put together an example of using an icon via CSS background-image at https://jsfiddle.net/7201rjtz/

Thanks!

EDIT: Instead of a utf8 data uri it could just as well be base64 (slightly smaller too): https://jsfiddle.net/7201rjtz/1/ (added Example2 css class with data uri using base64).

Contributor guide

Tech stack
htmlcssjavascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic knowledge of HTML/CSSGit and GitHub
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Look at the icon page template in the repository (likely under ` layouts` or similar). Locate how the 'Copy HTML' section is implemented. Then add a new section for 'Copy CSS background image' that removes width/height from the SVG, applies `encodeURIComponent()` (or base64), and formats it as `url(data:image/svg+xml;utf8,...)`. The icon SVG source can be found in the `icons/` directory. Test the output against the examples in the issue. Consider whether to support both utf8 and base64 options as suggested.