[Checkbox] inline SVG background-image for icon #2709
Conversation
this brings it back to CSS-only so we can rely on pseudo-states! core take a dev dep on a library that enables this, and runs it thru svgo!
remove font icon support, add background-image layer instead of ::beforePreview: documentation | landing | table |
DRY mixinPreview: documentation | landing | table |
bring back the ::before for :active statePreview: documentation | landing | table |
lintPreview: documentation | landing | table |
| // Sass function to inline a UI Icon svg and change its path color: | ||
| // svg("16px/icon-name.svg", (path: (fill: $color)) ) | ||
| 'svg': inliner('../../resources/icons', { | ||
| // run through SVGO first |
There was a problem hiding this comment.
if we run this through SVGO, does it use all the default settings? Are those okay? sometimes SVGO gets a little overzealous.
There was a problem hiding this comment.
yeah default settings and i don't think there's a way to configure. seems sufficient for now.
if we care about the settings then we should add a script to ensure the tracked icon files are already optimized.
| &::before { | ||
| // embed SVG icon image as backgroud-image above gradient. | ||
| // the SVG image content is inlined into the CSS, so use this sparingly. | ||
| background-image: svg("16px/#{$icon}.svg", (path: (fill: $white))); |
There was a problem hiding this comment.
why not just parameterize whole path? we'll never want 32px icons?
There was a problem hiding this comment.
we only have 16px and 20px icons and this way you can access either. in this case we don't need the 20px since the forms are so simple.
| export interface ICheckboxState { | ||
| checked: boolean; | ||
| // Checkbox adds support for uncontrolled indeterminate state |
There was a problem hiding this comment.
/** */ docs comment?
small-tickandsmall-minusin the checkbox CSS directly.content: $pt-icon-small-tick(in fact, that's the line that was replaced) so we no longer even need to support the font fallback!indicatorlogic and thecheckedstate (which was only needed to render the icon) and all associated tests.What about the bytes?
Each icon adds ~300B to the total file size. Yes, bytes. This is not significant.
blueprint.css290K ⇒ 291K