alat za programere / 26

Konvertor iz SVG-a u React JSX / TSX

Pretvorite SVG vektorsku oznaku u čist, modularizovan React JSX ili TypeScript TSX kod.

Konvertor iz SVG-a u React JSX / TSX: TOEA pretvara SVG atribute u kebab-case formatu u React camelCase, pretvara umetnute stilove u JS objekte i obavija SVG element. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

Naziv komponente

TypeScript (React.FC & SVGProps)

Prosledi props ({...props})

Unos sirovog SVG markupa

React JSX / TSX komponenta

import React from "react";

export const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-check" {...props}>
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>
);

Kako da se ikona ponaša kao tekst

Komponenta ikone najlakše se ponovo koristi kada preuzima boju i veličinu iz mesta na kojem je postavljena. Zamenite unapred zadate boje fill ili stroke vrednošću currentColor, kako bi ikona pratila boju okolnog teksta, i uklonite width i height, ali zadržite viewBox, tako da CSS ili className određuju veličinu. Ako datoteku prvo provučete kroz SVG čistač, uklonićete metapodatke editora koji bi se inače našli u vašem paketu.

ID-jevi, stilovi i pristupačnost

Gradijenti, maske i putanje za isecanje pozivaju se pomoću id. Ako istu komponentu prikažete dvaput, stranica ima duplirane ID-jeve, pa druga kopija može da pokaže na gradijent prve. Kada ikona koristi takve elemente, generišite jedinstvene ID-jeve pomoću React funkcije useId.

Element <style> unutar SVG-a kvari JSX, jer se njegove vitičaste zagrade čitaju kao izrazi; premestite ta pravila u atribute ili stilsku datoteku. Dekorativnoj ikoni dodajte aria-hidden="true", a ikoni koja prenosi značenje dodajte role="img" i <title>.

Kako se koristi

Nalepite sirovu SVG oznaku.
Podesite naziv komponente, TypeScript interfejse i prosleđivanje propertija.
Kopirajte gotov React kod komponente.

Privatnost i ograničenja

Transformacija oznake izvršava se isključivo u JavaScript-u na strani klijenta.

Srodne alatke

Često postavljana pitanja

Da li podržava TypeScript?

Da, generiše potpuno tipizovane komponente React.FC<React.SVGProps<SVGSVGElement>>.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban