# Discourse accepte-t-il les icônes SVG avec dégradé ?

**URL:** https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062
**Category:** Development
**Created:** [Mars 14, 2023, 5:37 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062 "2023-03-14T05:37:13Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [Mars 14, 2023, 5:37 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/1 "2023-03-14T05:37:13Z")

</div>

Je vois que toute icône avec un dégradé que j’ai mise ne fonctionne pas, est-ce que Discourse ne l’accepte pas ?

S’il ne l’accepte pas, y a-t-il un moyen de mettre un dégradé autour des icônes via CSS ?

---

<div class="post-metadata">

### Author: ![sevadev-ramchandra](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sevadev-ramchandra/32/301936_2.png) [@sevadev-ramchandra](https://meta.discourse.org/u/sevadev-ramchandra)
#### Post date: [Mars 14, 2023, 7:16 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/2 "2023-03-14T19:16:13Z")

</div>

J’ai les mêmes questions, quelqu’un a-t-il une idée à ce sujet ?

---

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [Mars 14, 2023, 9:15 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/3 "2023-03-14T21:15:43Z")

</div>

Si le format SVG prend en charge les dégradés, considérez-le comme un bug. Il est probablement préférable de le signaler comme une demande de fonctionnalité sur le dépôt `git`.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [Mars 14, 2023, 11:23 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/4 "2023-03-14T23:23:55Z")

</div>

Un SVG, comme un logo, devrait fonctionner.  
D’après ce que je sais, les dégradés des icônes SVG sont remplacés lorsque leur couleur est définie par le CSS ?

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [Mars 17, 2023, 6:14 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/5 "2023-03-17T18:14:59Z")

</div>

J’ai vu qu’il y avait deux méthodes, par CSS et par le code du fichier SVG, mais à chaque fois que j’en utilise une ou l’autre, ça ne fonctionne pas, le fichier ne change pas !

Connaissez-vous un moyen d’utiliser un dégradé sur les icônes ?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Mai 1, 2023, 8:18 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/6 "2023-05-01T20:18:55Z")

</div>

Les dégradés CSS ne fonctionneront pas avec les icônes SVG, je pense que le dégradé doit être appliqué directement au fichier SVG.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [Mai 1, 2023, 9:11 UTC](https://meta.discourse.org/t/does-discourse-accept-svg-icons-with-gradient/258062/7 "2023-05-01T21:11:04Z")

</div>

Vous pouvez utiliser cette astuce pour créer un dégradé sur les icônes SVG :

> [@How do I put gradient on thin icons?](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429/4?u=arkshine):
>
> Hi, From what I read in [Gradients in SVG - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients), you must add \<linearGradient\> to the SVG. Others resources: [Gradient fills for SVG icons](https://fvsch.com/svg-gradient-fill)[SVG Gradients](https://jenkov.com/tutorials/svg/svg-gradients.html) What you can do is create a hidden SVG in your [theme/component](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) to define your gradients: \<svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;"\> \<linearGradient id="my-gradient-1" x2="0" y2="1"\> \<stop offset="0%" stop-color="var(--color-stop-1)" /\> \<stop offset="50%" …

Vous créez un SVG invisible où vous définissez tous vos dégradés associés à un `id` (par exemple : `\u003clinearGradient id=\"my_id\"...`)

Ensuite, dans votre CSS, vous ciblez les icônes SVG et utilisez `fill: url(#my-id)`

Je ne suis pas sûr à quel point c’est moche, mais ça fonctionne. 😄
