react-icons应用线性梯度 [英] react-icons apply a linear gradient

问题描述

我想使用线性渐变动态地部分填充来自React-icons的Font Awesome Star.我尝试了以下方法:

I would like to dynamically, partially fill a react-icons sourced Font Awesome Star using linear gradient. I have tried the following:

使用内联样式反应组件-将父跨度的背景设置为渐变并使SVG透明.似乎无法将SVG星形周围的边框设置为#FFFFFF，因此我看到了父跨度的整个背景.见下文:

React Component with Inline Style - Setting the background of the parent span to gradient and making the SVG transparent. Can't seem to set the border around the SVG star to #FFFFFF so I see the parent span's whole background. See below:

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路径是我父级span的第三个孩子，我不知道该如何访问.

I have also tried creating a linearGradient component and setting the path's fill="url(#component)", but react-icons path is the 3rd child to my parent span which I can't figure out how to access.

请帮助

推荐答案

存在相同的问题，这是一个简单的可行解决方案:

Was having the same issue, here's a simple working solution:

1. 添加<svg>包裹<的元素渐变>组件的元素.

1. Add a < svg > element wrapping a < gradient > element to the component.

将ID添加到<渐变>

Add an id to the < gradient >

将渐变链接到笔画"通过"url(< id>)""图标的属性:

Link the gradient to the "stroke" property of the icon via "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 :在某些背包中，您可能需要将"stroke"切换为来填充".

obs: In some packs you may need to switch "stroke" to "fill".

这篇关于react-icons应用线性梯度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！