Remplacer les icônes de polices par l'icône SVG - Supprimer les styles en ligne

Récemment, j'ai décidé de passer aux icônes SVG à partir des icônes de polices. Je Illustrator pour dessiner mes SVGs et j'exporté les Plans de travail (contenant une icône individuelle) avec les paramètres suivants:Remplacer les icônes de polices par l'icône SVG - Supprimer les styles en ligne

style: inline style
polices: SVG
Images: Intégrer
ID d'objet : couche noms
décimal: 2

J'ai utilisé le Icomoon app pour générer les icônes SVG. Le problème est que tous les SVG ont une propriété de remplissage, de trait ou de style en ligne partout. Je ne peux pas mettre à jour la couleur de l'icône avec CSS tant que ces styles sont présents dans le SVG.

Ai-je raté quelque chose? Existe-t-il une option dans Illustrator pour enregistrer les fichiers SVG sans les propriétés fill/stroke/styles? Ou dois-je utiliser quelque chose comme Remove SVG Properties pour supprimer les propriétés?

Si Remove SVG Properties est la voie à suivre, quelqu'un peut-il me dire comment l'utiliser dans mon projet CLI angulaire? Je suis très nouveau à cela.

Source

2017-09-22 user3607282

Oui, vous pouvez.

Il suffit de sélectionner le svg en CSS puis appliquer:

selector { 
    fill: red; 
    stroke: blue; 
    /* etc */ 
}

Il semble fonctionner très bien pour moi. En option, ajoutez !important si nécessaire.

Une autre chose que vous pouvez faire pour mettre à jour le CSS en ligne est par jQuery, en utilisant la méthode .css().

Une façon d'utiliser des icônes libres de cet endroit est (link):

.lnr-home { 
 
    color: red; 
 
    font-size: 40px; 
 
    /* To get crisp results, use sizes that are 
 
    a multiple of 20; because Linearicons was 
 
    designed on a 20 by 20 grid. */ 
 
} 
 

 
body { 
 
    font-size: 40px; 
 
    font-family: sans-serif; 
 
    color: #red; 
 
}

<!-- Add the following <link> to the <head> of your HTML. --> 
 
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> 
 

 
<!-- To insert the icon: --> 
 
<span class="lnr lnr-home"></span> lnr-home 
 

 
<!-- 
 
Cheat Sheet: 
 
https://linearicons.com/free#cheatsheet 
 
-->

Source

2017-09-22 11:17:07 jack

il ne semble pas fonctionner lorsque le svg a quelque chose comme ceci: ' '. Si vous supprimez le 'remplir =" # 637282 "style =" fill: var (- color1, # 637282) "' le style que vous avez ajouté ci-dessus fonctionne uniquement. – user3607282

Si vous mettez à jour les valeurs inline à partir de l'inspection, les couleurs changent-elles? Si oui, mettez à jour les valeurs de jQuery. – jack

vérifier ma version modifiée – jack

Vous pouvez utiliser l'outil en ligne est ce convertisse automatiquement le style en ligne. utiliser ce développeur Android http://inloop.github.io/svg2android/

Source

2017-09-22 11:41:50

Remplacer les icônes de polices par l'icône SVG - Supprimer les styles en ligne

Répondre

Questions connexes