Bez względu na to, co robię, nie mogę zmienić koloru tych 2 ikon reagujących, nie jestem pewien, czy są ustawione, aby nie być zmienne. Wcześniej użyłem innych ikon, nie miałem jeszcze tego problemu, dziękuję!

import React from "react";
import "./styles.css";
import { GrSubtractCircle, GrAddCircle } from "react-icons/gr";

export default function App() {
  return (
    <div className="App">
       <GrAddCircle id="try"/>
      
    </div>
  );
}

Css

#try{
  color: green;
}
svg{
  color: aqua;
}
0
Xiao H 4 październik 2020, 06:26

1 odpowiedź

Najlepsza odpowiedź

Występuje problem z atrybutem obrysu w ścieżce w SVG jego domyślnie "# 000", co oznacza, że zawsze będzie to czarny kolor, który powinien być "correctColor"

Jako praca w tym problemie z tym konkretnym elementem w tej bibliotece

Zrobiłem następujące

import React from "react";
import { GrAddCircle } from "./Icons";

function App() {
  return (
    <div className="App">
      <GrAddCircle
        color="red"
        title="folder icon"
        className="additional-class-name"
      />
    </div>
  );
}

export default App;

Następnie w SRC stworzyłem folder o nazwie ikony, aby pracować jako moje własne ikony niestandardowe

Następnie wewnątrz folderu utworzyłem index.js

import React from "react";

export const GrAddCircle = ({ color, size, title, className }) => {
  return (
    <svg
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      height={ size ? size : "1rem" }
      width={ size ? size : "1rem" }
      style={{ color }}
      className={ className ? className : '' }
    >
      { title ? <title>{title}</title> : null }
      <path
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,18 L12,6 M6,12 L18,12"
      ></path>
    </svg>
  );
};

W ten sposób możesz utworzyć własne niestandardowe ikony na podstawie ikon reakcji i zaimportuj go z ikony Freder bezpośrednio

Teraz element będzie miał rozmiar nieruchomości (szerokość, atrybuty wysokości), tytuł, nazwa użytkownika i kolor. Możesz dodać więcej zwyczajowych rekwizytów, jeśli chcesz.

0
sasha romanov 4 październik 2020, 04:56