Question

我想动态地，使用线性渐变部分填充一个反应图标来源的Font Awesome Star。我尝试过以下方法：

具有内联样式的React组件 - 将父级跨度的背景设置为渐变并使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）”，但是react-icons路径是我父母跨度的第三个孩子，我无法弄清楚如何访问。

请帮忙

Answer 1

遇到了同样的问题，这是一个简单的工作解决方案：

添加一个
给<渐变>
添加一个id
通过“url()”将渐变链接到图标的“stroke”属性：

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

我想我找到了解决方案，使用了另外的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>

希望这行得通！

Answer 3

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

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

我的代码就是这样工作的。非常感谢。

react-icons应用线性渐变

3 个答案: