我从react icons中导入了Instagram图标（SiInstagram from Simple Icons）到我的app.css中，现在我正在尝试更改我的Instagram图标的颜色，以匹配社交媒体图标的当前颜色。然而，我只能使用线性渐变在其背景上创建颜色效果，而不是在其实际颜色上。除了在“color：;”属性上，还有什么方法可以实现相同的颜色效果？
x1c 0d1x的数据
他的时代就像我的时代

的
APP.JS

import { SlSocialInstagram } from "react-icons/sl";
return (
    <div className="div-app">
      <div className="container-app">
        <div className="content">
            <div className="contact-div">
              <ul className="contact-ul">
                <li>
                  <a href="">
                    <BsFillTelephoneFill />
                  </a>
                </li>
                <li>
                  <a href="">
                    <BsFillEnvelopeFill />
                  </a>
                </li>
                <li>
                  <a href="">
                    <TbMessageCircle2Filled />
                  </a>
                </li>
                <li>
                  <IconContext.Provider
                    value={{ color: "blue", className: "global-class-name" }}
                  >
                  <a href="">
                    <SlSocialInstagram id="instagram-icon" />
                  </a>
                  </IconContext.Provider>
                  ;
                </li>
              </ul>
            </div>
          </div>
    </div>
  );
}

字符串
APP.CSS

.contact-div {
  display: inline-block;
  font-size: 25px;
  vertical-align: top;
  margin: 150px 0 0 40px;
}
.contact-ul {
  list-style: none;
  padding: 0;
}
.contact-ul li {
  margin-bottom: 15px;
}
.contact-ul li a {
  text-decoration: none;
  color: white;
}
#instagram-icon {
  background-image: url("./assets/headset.jpg");
}

型