# 얇은 아이콘에 그라데이션을 적용하는 방법은?

**URL:** https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429
**Category:** Development
**Created:** [3월 26, 2023, 1:00오전 UTC](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429 "2023-03-26T01:00:51Z")
**Posts on this page:** 1
**Showing post:** 4

<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: [3월 27, 2023, 11:30오후 UTC](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429/4 "2023-03-27T23:30:03Z")

</div>

안녕하세요,

[Gradients in SVG - SVG | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) 문서에서 확인한 바로는 SVG에 `<linearGradient>`를 추가해야 합니다.

다른 참고 자료:

- [Gradient fills for SVG icons](https://fvsch.com/svg-gradient-fill)
- [SVG Gradients](https://jenkov.com/tutorials/svg/svg-gradients.html)

[theme/component](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)에 숨겨진 SVG를 만들어 그라디언트를 정의할 수 있습니다:

```html
<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%" stop-color="var(--color-stop-2)" />
  </linearGradient>
  
  <linearGradient id="my-gradient-2">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
    <stop offset="100%" stop-color="var(--color-stop-3)" />
  </linearGradient>

  <!-- 고유한 ID를 사용하여 필요한 특정 그라디언트를 정의하세요 -->
</svg>

```

그 다음 CSS에서 색상을 정의하고 `fill`로 채우려는 SVG 요소를 지정합니다:

```css
/* 그라디언트 색상 정의 */
#my-gradient-1 {
    --color-stop-1: #a770ef;
    --color-stop-2: #eda58b;
}

#my-gradient-2 {
    --color-stop-1: #2980b9;
    --color-stop-2: #6dd5fa;
    --color-stop-3: #ffffff;
}

.svg-icon, .svg-icon-title {
    /* 모든 svg 아이콘을 대상으로 합니다 */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* 채팅 아이콘만 대상으로 합니다 */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

```

참고: `fill`의 두 번째 값은 폴백(fallback) 색상입니다.

 ![NVIDIA_Share_sReu1lscRl](https://global.discourse-cdn.com/meta/original/4X/e/6/a/e6a11f325ed20a7ddbb091bf1491c56fdc7ffd8d.jpeg)

광범위하게 테스트하지는 않았으며, 이는 커스터마이징 방법을 보여주는 예시입니다.  
더 복잡한 그라디언트를 만들려면 문서를 참고해 보세요.

도움이 되기를 바랍니다!

---

_[View the full topic](https://meta.discourse.org/t/how-do-i-put-gradient-on-thin-icons/259429)._