Maintenance d’un set d’icônes SVG

  • Définir le même viewport pour tous les icônes et avoir la main sur la cohérence des tailles (ex : 48x48 px)
  • Maintenir nos icônes au même endroit et tous les exporter en un seul clic dans notre projet web. Les icônes sont enregistrés avec le nom de leur artboard
Fichier de maintenance du set d’icônes
<symbol viewBox=”0 0 48 48" id=”my-icon”>
<path d=”…”/>
<path d=”…” />
</symbol>
<svg>
<use xlink:href=”./path/to/sprite/file/sprite.svg#my-icon” />
</svg>
SVG inclu dans un shadow DOM
.c-ui-icon {
fill: #FFFFFF;
}
.c-ui-icon {
fill: currentColor;
}
.c-ui-icon {
color: #FF0000;
fill: #FFFFFF;
}
.c-ui-icon {
color: #FFFFFF;
fill: #FF0000;
}
$(‘svg’).find(‘[fill=”#888"]’).each(function(){
$(this).attr(‘fill’, ‘currentColor’);
});
Aperçu de quelques icônes. Création des icônes by @lea_cffy

--

--

--

🇫🇷Paris 🧑‍🎨UI Designer / Design-Systems 🍏Sports & Nutrition enthusiast 🏋️Coached by @axtrainer_ 🤓Bayesian PTC7 💪Host @__jumparound 🔊Host @_waveymusic

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kévin Bizien

Kévin Bizien

🇫🇷Paris 🧑‍🎨UI Designer / Design-Systems 🍏Sports & Nutrition enthusiast 🏋️Coached by @axtrainer_ 🤓Bayesian PTC7 💪Host @__jumparound 🔊Host @_waveymusic

More from Medium

React vs Vue: A Guide to Choose the Best JavaScript Framework

Pagekit | Made with Vue JS

How make you own custom directives in Vue.js ?

Load your SVG icons into your Nuxt Project easily