Иконки-реактивы применяют линейный градиент

Question

Я хотел бы динамически, частично заполнить исходные иконки Font Awesome Star, используя линейный градиент. Я пробовал следующее:

Реагируйте на компонент со встроенным стилем - установите фон родительского диапазона на градиент и сделайте SVG прозрачным. Не могу установить границу вокруг звезды SVG на значение #FFFFFF, поэтому я вижу весь фон родительского диапазона. Увидеть ниже:

import React from 'react'
import FaStar from 'react-icons/lib/fa/star'

const Stars = () => {

  const inlineStyle = (pctFill) => {
    return(
      {background: 'linear-gradient(90deg, #134758 '+pctFill+'%, #d3d3d3 '+pctFill+'%)'}
    )
  }

  return(
    <div>
      <span style={inlineStyle(50)}>
        <FaStar />
      </span>
    </div>
  )
}

export default Stars

Я также попытался создать компонент linearGradient и установить путь fill="url(#component)", но путь response-icons является третьим дочерним элементом моего родительского диапазона, к которому я не могу понять, как получить доступ.

Пожалуйста помоги

Answer 1

Была такая же проблема, вот простое рабочее решение:

1. Добавьте элемент <svg>, оборачивающий элемент <gradient> в компонент.

2. Добавьте идентификатор к <gradient>

3. Свяжите градиент со свойством «штрих» значка через «url (<id>)»:

      import { FiCheck } from 'react-icons/fi';

//...

<svg width="0" height="0">
  <linearGradient id="blue-gradient" x1="100%" y1="100%" x2="0%" y2="0%">
    <stop stopColor="#7a6ded" offset="0%" />
    <stop stopColor="#591885" offset="100%" />
  </linearGradient>
</svg>


<FiCheck style={{ stroke: "url(#blue-gradient)" }} />

obs: В некоторых наборах может потребоваться переключить "штрих" на "заливку".

Answer 2

Мой код работал так. Большое спасибо.

Answer 3

Думаю, я нашел решение, используя дополнительные теги svg и def. Единственная неудача в том, что вы должны указать ширину и высоту svg.

<Button className="border-0">
      <svg width="20" height="20">
         ------------------------------- // add linearGradient
        <defs>
          <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%"  stopColor="gold" />
            <stop offset="95%" stopColor="red" />
          </linearGradient>
        </defs>
          --------------------------------------- //pass attr to react icon
        <IconContext.Provider value={{ attr: {fill: "url('#myGradient')"}}}>
          <FaInstagram />
        </IconContext.Provider>
      </svg>
    </Button>

Надеюсь, это сработает!