[icons] Component use SVG version of icons - #5327
vvalentin-lucca wants to merge 6 commits into
Conversation
GitHub Actions
Inactive
|
🚀 Storybook preview deployed: https://pub-dc6d99acd6874e2aaff6219dd8a13ae2.r2.dev/PR-5327/index.html |
7dcb52a to
86b160e
Compare
GitHub Actions
Inactive
provideLuIconSpritePreload() lets consuming apps trigger the sprite fetch on app init instead of waiting for the first <lu-icon>/<pr-icon> to mount. Default lazy-load behavior is unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
|
||
| .icon-color-placeholder { | ||
| color: var(--palettes-neutral-400); | ||
| vertical-align: text-bottom; |
There was a problem hiding this comment.
I’m wondering about why aligning to text-bottom.
Would it be acceptable to align the icons on the first baseline ?, so that we have a natural font-like positionning?
| @@ -0,0 +1 @@ | |||
| <div [innerHTML]="spriteUrl | luSafeExternalSvg"></div> | |||
There was a problem hiding this comment.
Wondering about the need to have an extra div for this component…
What is the benefit compared to injecting the SVG in the component directly?
There was a problem hiding this comment.
innerHTML cannot be placed on the host.
| lu-bubble-icon, | ||
| lu-software-icon .softwareIcon, | ||
| lu-icon .lucca-icon, | ||
| lu-icon .icon, |
There was a problem hiding this comment.
:is(lu-icon, pr-icon) .icon ?
There was a problem hiding this comment.
It seems like most lu-icon have been replaced by :where(lu-icon, pr-icon).
Wondering if we double-checked for selector that were lu-icon .lucca-icon (011). Specificity could drop to 010 instead of 011 and be breaking.
| &:not(svg) { | ||
| inset-block-start: 0.075rem; | ||
| } | ||
|
|
||
| &:is(svg) { |
There was a problem hiding this comment.
I didn't know that. Is it worth taking the risk?
There was a problem hiding this comment.
Probably not it what we have works.
| @@ -0,0 +1 @@ | |||
| <div [innerHTML]="spriteUrl | luSafeExternalSvg"></div> | |||
There was a problem hiding this comment.
- Is this embedding the sprite within each icon?
- If yes, should we load it once and have some sort of dependency from the icons? Meaning the icons return an error if the project does not load the SVG in its header. This would avoid many duplicated content, if feasible.
vvalentin-lucca
added
the
🤖 Produced by AI
|
After discussions with Product XP: risks seems too important compared to the gain. |
This branch was successfully deployed
6 participants
Description
Switch in the rendering technique for icons called via the LF component: we’re switching from a font (managed by IcoMoon) to an SVG sprite (which is then used via
<use href="#...">).(HTML and CSS icons remain functional and still use the font.)