كيف أضع تدرجًا على الأيقونات الرفيعة؟

[Arkshine]

أهلاً،

بناءً على ما قرأته في https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients، يجب عليك إضافة <linearGradient> إلى SVG.

مصادر أخرى:

• Gradient fills for SVG icons
• SVG Gradients

ما يمكنك فعله هو إنشاء SVG مخفي في المظهر/المكون الخاص بك لتعريف التدرجات الخاصة بك:

<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>

  <!-- Define specific gradient as needed with a unique ID -->
</svg>

بعد ذلك، في ملف CSS الخاص بك، يمكنك تعريف اللون واستهداف عناصر SVG التي تريد ملؤها:

/* defines gradients color */
#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 {
    /* targets all svg icons */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* targets only chat icon */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

ملاحظة: القيمة الثانية لـ fill هي لون احتياطي.

لم أقم بالاختبار بشكل مكثف؛ هذا مثال لكيفية التخصيص.
لا تتردد في مراجعة الوثائق لإنشاء تدرجات أكثر تعقيدًا.

آمل أن يكون هذا مفيدًا!