Comments (9)
Hello @Tlahey,
Thanks for your message. Do you think it could be possible to avoid breaking changes for this issue?
And what do you think about adding fill="currentColor"
or stroke="currentColor"
on SVG elements (<svg>
, <path>
, <g>
, <circle>
, etc.)? Allowing control of these colors through CSS. (instead of manipulating filters as you propose).
Unfortunately, we need to be focused for now and cannot give energy on our side on this implementation. But feel free to discuss it there. But what it's sure, it's that's a good point we need to take care of for our next implementation.
from vitamin-web.
@lauthieb also not possible with currentColor
Because the svg is downloaded and not inline on the page.
from vitamin-web.
I've found a solution but I'm not really fan ...
<script>
let svgContent;
import(`@vtmn/icons/dist/vitamix/svg/${value}.svg`).then(module => {
fetch(module.default)
.then(response => response.text())
.then(data => {
svgContent = data;
});
});
</script>
{#if svgContent}
<div class={componentClass} style={componentStyle} {...$$restProps}>
<svg xmlns="http://www.w3.org/2000/svg">{@html svgContent}</svg>
</div>
{/if}
Here 2 thinks :
- In order to apply style, we have to set the svg inline
- We have to wrap the svg with another svg in order to apply the color (the html doesn't apply the css when he is loaded)
from vitamin-web.
I've found another way with mask-image
:
<html>
<head>
</head>
<style>
.icon {
--svg: url("https://raw.githubusercontent.com/Decathlon/vitamin-web/main/packages/sources/icons/src/generated/vitamix/svg/home-fill.svg");
width: 32;
height: 32;
background-color: black;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
}
.blue {
background-color: blue;
}
</style>
<body>
<div class="icon"></div>
<div class="icon blue"></div>
</body>
</html>
I haven't done a wide testing but, at least, it looks good in my:
- chrome
- safari
- firefox
from vitamin-web.
Indeed, it can be a good solution !
Tested with storybook and it works fine :)
from vitamin-web.
Regarding performance,
even if the mask-image
proposition is far better than the current implementation using font icons:
-
Load only used icon (instead of all at once)
-
Better caching (before, one icon change bursted the cache for all other icons in the sprite)
My favorite solution is still the <img src="xxx.svg"
as it have the same benefits of above + also add the ability to:
- Load only when required [enable native lazyloading]
from vitamin-web.
By adding this lines in the default theme, I'm able to work with svg from image and changed the colors :
--vtmn-semantic-color_content-primary-filter: invert(6%) sepia(13%) saturate(4111%) hue-rotate(160deg) brightness(99%) contrast(102%);
--vtmn-semantic-color_content-secondary-filter: invert(36%) sepia(11%) saturate(835%) hue-rotate(168deg) brightness(90%) contrast(87%);
--vtmn-semantic-color_content-tertiary-filter: invert(48%) sepia(9%) saturate(830%) hue-rotate(170deg) brightness(92%) contrast(83%);
--vtmn-semantic-color_content-action-filter: invert(18%) sepia(54%) saturate(5673%) hue-rotate(186deg) brightness(93%) contrast(101%);
--vtmn-semantic-color_content-active-filter: invert(29%) sepia(97%) saturate(1219%) hue-rotate(174deg) brightness(99%) contrast(101%);
--vtmn-semantic-color_content-inactive-filter: invert(66%) sepia(12%) saturate(348%) hue-rotate(173deg) brightness(89%) contrast(83%);
--vtmn-semantic-color_content-negative-filter: invert(18%) sepia(46%) saturate(5676%) hue-rotate(345deg) brightness(105%) contrast(91%);
--vtmn-semantic-color_content-warning-filter: invert(68%) sepia(74%) saturate(6607%) hue-rotate(355deg) brightness(105%) contrast(102%);
--vtmn-semantic-color_content-positive-filter: invert(39%) sepia(13%) saturate(5969%) hue-rotate(101deg) brightness(117%) contrast(73%);
--vtmn-semantic-color_content-information-filter: invert(33%) sepia(59%) saturate(1491%) hue-rotate(171deg) brightness(99%) contrast(101%);
--vtmn-semantic-color_content-accent-filter: invert(6%) sepia(55%) saturate(1278%) hue-rotate(163deg) brightness(92%) contrast(103%);
--vtmn-semantic-color_content-visited-filter: invert(36%) sepia(7%) saturate(2155%) hue-rotate(247deg) brightness(87%) contrast(89%);
--vtmn-semantic-color_content-primary-reversed-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
--vtmn-semantic-color_content-action-reversed-filter: var(--vtmn-semantic-color_content-primary-reversed-filter);
--vtmn-semantic-color_content-visited-reversed-filter: invert(74%) sepia(13%) saturate(638%) hue-rotate(247deg) brightness(79%) contrast(89%);
--vtmn-semantic-color_content-background-brand-primary-filter: var(--vtmn-semantic-color_content-information-filter);
I need to create this vars also for the dark mode
Edit:
For dark mode
--vtmn-semantic-color_content-primary-filter: invert(5%) sepia(95%) saturate(751%) hue-rotate(162deg) brightness(96%) contrast(103%);
--vtmn-semantic-color_content-secondary-filter: invert(95%) sepia(10%) saturate(90%) hue-rotate(169deg) brightness(94%) contrast(90%);
--vtmn-semantic-color_content-tertiary-filter: invert(47%) sepia(18%) saturate(400%) hue-rotate(170deg) brightness(94%) contrast(92%);
--vtmn-semantic-color_content-action-filter: invert(25%) sepia(30%) saturate(5532%) hue-rotate(180deg) brightness(95%) contrast(101%);
--vtmn-semantic-color_content-active-filter: invert(28%) sepia(86%) saturate(1541%) hue-rotate(176deg) brightness(101%) contrast(101%);
--vtmn-semantic-color_content-inactive-filter: invert(64%) sepia(10%) saturate(398%) hue-rotate(173deg) brightness(91%) contrast(87%);
--vtmn-semantic-color_content-negative-filter: invert(21%) sepia(56%) saturate(3597%) hue-rotate(341deg) brightness(104%) contrast(99%);
--vtmn-semantic-color_content-warning-filter: invert(45%) sepia(84%) saturate(3191%) hue-rotate(355deg) brightness(104%) contrast(101%);
--vtmn-semantic-color_content-positive-filter: invert(59%) sepia(62%) saturate(5080%) hue-rotate(102deg) brightness(97%) contrast(73%);
--vtmn-semantic-color_content-information-filter: invert(33%) sepia(100%) saturate(1209%) hue-rotate(174deg) brightness(87%) contrast(103%);
--vtmn-semantic-color_content-accent-filter: invert(5%) sepia(41%) saturate(1959%) hue-rotate(167deg) brightness(93%) contrast(102%);
--vtmn-semantic-color_content-visited-filter: invert(34%) sepia(7%) saturate(2309%) hue-rotate(247deg) brightness(89%) contrast(85%);
--vtmn-semantic-color_content-primary-reversed-filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(61deg) brightness(115%) contrast(100%);
--vtmn-semantic-color_content-action-reversed-filter: var(--vtmn-semantic-color_content-primary-reversed-filter);
--vtmn-semantic-color_content-visited-reversed-filter: invert(64%) sepia(8%) saturate(1027%) hue-rotate(247deg) brightness(92%) contrast(87%);
--vtmn-semantic-color_content-brand-primary-filter: var(--vtmn-semantic-color_content-information-filter);
from vitamin-web.
Lot of issues with VtmnIcon
as svg.
- All the css are based on
span
and classvtmx
. We have to add css in order to takes also the img. - For components like
VtmnButton
, we can added icons for information but, with the police + span, the colors is inherited from the parent. With the img, it is not longer possible. We have to re-think the solution about that !
from vitamin-web.
After a long discussion with @jquinc30 and @manglard , we think the move to svg is more complicated that expected.
TLTR :
First, we have to move the project as type module for jest (because we have to used {#await
synthax into svelte and svelte-jester doesn't like that).
The other solution should be remove all tests, but it's not possible.
For more information, please check https://github.com/svelteness/svelte-jester and the part "In ESM mode"
Second, 2 ways to injects the SVG.
- We can just used the src from the await in order to inject the svg as img. With this solution, we can only apply a color with a filter (see topics above). On top of that, we have to change also all the CSS of the existing components in order to change the way to stylized the icons. (
⚠️ today, the style applied on icons is only for a span with vtmx typo). - We can also used the src from the await and fetch this data in order to apply the src on the document. With this solution, the bad point is, we have to used
{@html
in order to inject the svg. But we can apply style without filter ! Also on the same way that the first point, we have to changed all the CSS of the existing components in order to apply the correct style / color
Third, the existing components CSS
- All the existing components used CSS in order to inject icons with span / font. There are no existing CSS to inject icons as SVG / img.
Conclusion :
Move the current VtmnIcon to SVG is a long process and will be a hard rework.
But we can think about that with vtmn-play in order to enhancer the perf on the images.
I will open a thread on the vtmn-play project in order to add a VtmnIcon component which is import the svg and not the font.
For informations, ping @lauthieb @thibault-mahe
from vitamin-web.
Related Issues (20)
- bug(@vtmn/svelte): `VtmnNavbarLink` is not SSR compliant HOT 1
- docs: typeface is now deprecated HOT 3
- bug: Allow label in Input to be a component rather than a string
- bug: the thumb of the `Toggle` component doesn't have the right color in dark mode
- bug(`@vtmn/css`): The placeholder a cropped on the VtmnSearch
- feat(`@vtmn/svelte`, `@vtmn/vue`, `@vtmn/react`): add summary as slot for `VtmnAccordion`
- bug(@vtmn/css): `VtmnRating` stars out of the box with many reviews. HOT 3
- feat: enhancement `VtmnCard` variant for SSR HOT 2
- bug(@vtmn/react): VtmnQuantity "-" and "+" buttons should not validate form instantly HOT 1
- feat(@vtmn/css): enhancement `VtmnSelect` make the props label optional HOT 1
- bug(@vtmn/react): Having warnings "fail to parse source map" using React / TSX HOT 2
- bug: wrong behaviour on the `VtmnChip`
- bug(@vtmn/svelte): linear progressBar not displayed correctly on storybook HOT 2
- feat(@vtmn/css): be able to choose the duration of display for snackbar (& toast) HOT 3
- feat(@vtmn/css, @vtmn/react, @vtmn/svelte, @vtmn/vue): Improve `VtmnAlert` component HOT 6
- bug(@vtmn/css): display issue for the vtmn-select_container when the text are too long
- bug(@vtmn/vue): `VtmnQuantity` component is broken when we click the plus button
- feat: Improve the management of the timeout on overlay components
- bug: (@vtmn/svelte): VtmnListItem component tabindex yields the value false
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vitamin-web.