Gestion des backgrounds en SVG

CyrilKrylatov commented 8 years ago

Lorsque j'ai un sélecteur avec un background qui contient un SVG style :

div {
    background: transparent url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 0)" fill="none"><circle fill="#54545E" cx="5" cy="5" r="5"/><path d="M5.84 5.006l1.659-1.66c.139-.139.139-.366 0-.507l-.338-.338c-.139-.139-.366-.139-.507 0l-1.659 1.66-1.65-1.65c-.139-.139-.366-.139-.507 0l-.338.338c-.139.139-.139.366 0 .507l1.65 1.65-1.648 1.648c-.139.139-.139.366 0 .507l.338.338c.139.139.366.139.507 0l1.648-1.648 1.652 1.652c.139.139.366.139.507 0l.338-.338c.139-.139.139-.366 0-.507l-1.652-1.652z" fill="#E5E5E9"/></g></svg>') center no-repeat;
}

Et que je le passe dans CSSLisible, j'obtiens :

div {
    background: transparent url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 0) " fill="none">') center no-repeat;
}

Darklg commented 8 years ago

J'ai fait un fix juste sur ce cas de figure, vu que l'inline SVG est vraiment une mauvaise pratique niveau maintenabilité ( pour changer l'icône, reexporter en inline et copier-coller au bon endroit ? :( )

CyrilKrylatov commented 8 years ago

@Darklg ok :) Oui c'est assez nul mais là c'est sur un plugin, j'peux pas toucher au markup pour y ajouter mon SVG du coup j'ai pas le choix. :(

Merci pour le fix ❤️

Darklg / CSSLisible

Gestion des backgrounds en SVG #86