Css 如何从react图标向svg图标应用线性渐变

我正在制作我的作品集，我想给我的Instagram和LinkedIn图标添加一些颜色渐变，但我不知道从哪里开始在文本上创建线性渐变

我查了一下怎么做，发现要做：

  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

但当我这么做的时候，它什么也没做。然后我还发现了一种使用

标记和

标记的方法，如下所示：

<defs>
     <linearGradient id="LinkedIn">
          <stop offset="5%" stop-color="#f60" />
          <stop offset="95%" stop-color="#FF6" />
     </linearGradient>
</defs>

---

一旦我有了它，它说用

fill（#LinkedIn）

属性应用

fill

，但当我这样做时，它什么也不做，或者使LinkedIn图标消失，这取决于我在html中的

位置，你在图标中设置了className道具了吗？css中的and.gradiention{…}