Jak działa forward ...props?

Komponent przyjmuje `{ size, color, ...props }` i przekazuje `{...props}` na element SVG. Dzięki temu możesz **dorzucić dowolny atrybut HTML**: ` `. Bez forward propsy "ginęły" by - musiałbyś modyfikować komponent za każdym razem.

Czemu nazwa komponentu musi być PascalCase?

JSX **rozróżnia tagi po pierwszej literze**: małe = HTML element (` `, ` `), duże = komponent React (` `). Jeśli nazwiesz komponent `iconCheck` (mała), JSX będzie myślał że to **HTML tag o nazwie "iconcheck"** i nic nie wyrenderuje. PascalCase jest **konwencją obowiązkową**.

Co jeśli SVG ma wiele kolorów (np. ilustracja)?

Tool **wyciąga tylko pierwszy/dominujący kolor** jako prop. Jeśli SVG ma wiele kolorów (kolorowa ilustracja), pozostałe zostają **inline w komponencie**. Możesz potem ręcznie dodać więcej propsów (np. `accentColor`, `backgroundColor`) i podmienić wartości. Albo wyłącz "Wyciągnij kolor" i zostaw wszystko jak było.

Default export czy named export?

**Named export** (`export const IconCheck`) jest **częstszy w bibliotekach** - łatwiej importować kilka ikon na raz: `import { IconCheck, IconClose } from "./icons"`. **Default export** (`export default function`) wygodny gdy w pliku jest **jeden komponent**. Dla biblioteki ikon **wybierz named**, dla pojedynczego komponentu **default jest OK**.

Co to jest React.FC vs zwykła funkcja?

`React.FC ` to **typ funkcyjnego komponentu**. Stary sposób typowania, **trochę kontrowersyjny** (domyślny `children` w typie, niektóre rzeczy działają inaczej). Współcześnie **częściej używa się zwykłej funkcji** ze stricte typowanymi propsami: `const IconCheck = ({size, color}: IconProps) => ...`. Jest jaśniej. Tool oferuje obie wersje, **wybierz zwykłą funkcję** chyba że masz konwencję w projekcie.

Czy mogę używać generowanego komponentu w Next.js?

Tak. **Działa zarówno w Server Components jak i Client Components**. Jeśli komponent nie używa state ani eventów, **może być Server Component** (lepsze dla SEO). Jeśli dodasz `onClick` na zewnątrz, **wrapper musi być Client Component** ale sam ikon nie. Po prostu wklej plik do `components/icons/` i importuj normalnie.

Co zrobić jeśli SVG nie ma viewBox?

**Bez `viewBox` SVG nie skaluje się**. Komponent będzie miał stały rozmiar mimo prop `size`. Naprawa: dodaj viewBox ręcznie w SVG przed konwersją albo edytuj wygenerowany komponent. Wartość `viewBox` to "min-x min-y width height" - dla typowej ikony 24x24 to `"0 0 24 24"`. Optymalizator SVG ostrzega o braku viewBox.

Czy mogę przekazać className?

Tak - jeśli zostawisz **forward ...props**, możesz przekazywać `className`, `style`, dowolne propsy DOM. Przykład: ` ` - kolor zmienia się przez Tailwinda zamiast prop `color`. Pamiętaj że `currentColor` w SVG bierze kolor z CSS-owej `color`, więc `text-green-500` (czyli `color: green`) zadziała.

Co robi pole "wyciągnij rozmiar"?

Zamienia stałe `width="24"` i `height="24"` w atrybuty zależne od propa: `width={size} height={size}`. Pozwala renderować ten sam komponent w różnych rozmiarach: ` ` albo ` `. Bez tego **rozmiar jest na stałe** w SVG i musisz override'ować przez CSS. Domyślnie 24 (typowy rozmiar ikon).

SVG na komponent React - darmowy

Po co konwertować SVG na komponent React?

Surowy SVG w aplikacji React ma kilka problemów: `class` musi być `className`, atrybuty z myślnikami (`stroke-width`) na camelCase, kolor jest "wbity" w SVG. Jeśli chcesz przerysować ikonę w innym kolorze, musisz mieć drugi plik. Jeśli ma być w innym rozmiarze - znowu osobny plik albo override w CSS.

Komponent React z propsami załatwia to elegancko: `<IconCheck size={20} color="red" />`. Jeden plik, dowolny kolor, dowolny rozmiar. Plus forward `...props` - dorzucisz `aria-label` albo `onClick` bez zmiany komponentu.

Tu wklejasz SVG (z Figmy, Iconify, własnej grafiki), wybierasz opcje (TypeScript vs JSX, named vs default export, czy chcesz prop `color`/`size`) i dostajesz gotowy do skopiowania komponent. Pobierasz jako `.tsx` z poprawną nazwą pliku albo kopiujesz w schowek.

Jak korzystać

Wklej kod SVG w lewy panel. Może być ikona (24x24), logo, ilustracja - dowolny SVG.
Wpisz nazwę komponentu (PascalCase, np. `IconCheck`, `LogoFirma`).
Włącz opcje: TypeScript dla typowanej wersji, default export albo named.
Po prawej zobaczysz gotowy komponent. Pod spodem podgląd z aktualnym rozmiarem i kolorem.
Kliknij "Kopiuj" żeby skopiować kod albo "Pobierz .tsx" żeby zapisać plik z poprawną nazwą.

Do czego się przydaje

Praktyczne zastosowania:

Biblioteka ikon w projekcie. Designer eksportuje 30 ikon z Figmy, ty konwertujesz każdą i dostajesz `components/icons/` z plikami `.tsx`. Każdy z propsami size/color, można zmieniać w locie.
Logo firmy. Eksport z Illustratora, konwersja, masz `<LogoBrand size={32} />` którego można używać w nagłówku, footerze, social mediach.
Ikony statusu. `<IconSuccess color="green" />`, `<IconError color="red" />` - jeden plik, różne kolory dla różnych stanów.
Customowe ilustracje hero. SVG z ilustracją na hero section - jako komponent z możliwością zmiany kolorów akcentu.
Replacement dla lucide-react / heroicons. Czasem potrzebujesz ikon niedostępnych w bibliotece. Konwertujesz własną.
Build-time SVG. W Next.js zamiast `<Image src="/icon.svg" />` lepiej mieć komponent - mniej requestów, lepsze SSR.
Prop forwarding. `<IconClose onClick={handleClose} aria-label="Zamknij modal" />` - akcesibilność i interakcja w jednym.

Aby najpierw zmniejszyć rozmiar SVG, użyj optymalizatora SVG. Dla HTML do JSX zobacz konwerter HTML na JSX.

Pytania i odpowiedzi

`currentColor` to specjalna wartość CSS która oznacza "weź kolor z `color` rodzica". Czyli ikona w `<div style={{color: "red"}}><IconCheck /></div>` będzie czerwona. To najlepszy default bo ikona dziedziczy styl, działa z hover (`text-blue-500 hover:text-blue-700`), działa z themingiem. Jeśli chcesz zawsze ten sam kolor, przekaż explicite: `<IconCheck color="#3b82f6" />`.

SVG na komponent React