react simple icons

React-Simple-Icons

Dieses Paket enthält die einfachen Symbole 13.18.0 als Satz von React -Komponenten.

Installation

Installieren Sie das Paket in Ihrem Projektverzeichnis mit:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

Unterstützung von Typenkript

Verwendung

Sie können Simpleicons.org verwenden, um ein bestimmtes Symbol zu finden. Beachten Sie beim Importieren eines Symbols, dass die Namen der Symbole beispielsweise Uppercamelcase sind:

• Material Design wird als { SiMaterialdesign } from @icons-pack/react-simple-icons freigelegt
• azure devOps ist als { SiAzuredevops } from @icons-pack/react-simple-icons freigelegt

Demo

Codesandbox bearbeiten

Grundlegendes Beispiel

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function BasicExample ( ) {
  return < SiReact color = '#61DAFB' size = { 24 } /> ;
} 

Titel ändern

@icons-pack/react-simple-icons bietet einen Standardtitel, der sich auf den Komponentennamen bezieht

Das <title> -Element enthält eine zugängliche Beschreibung eines Kurztextes eines beliebigen SVG-Containerelements oder eines Grafikelements.

 import { SiReact } from '@icons-pack/react-simple-icons' ;

// title default "React"
function ChangeTitle ( ) {
  return < SiReact title = 'My title' color = '#61DAFB' size = { 24 } /> ;
} 

Verwenden Sie die Standardfarbe

Stellen Sie die Farbe als default ein, um die Standardfarbe für jedes Symbol zu verwenden

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = 'default' size = { 24 } /> ;
}

Verwenden Sie die Standardfarbe als Hex

Gehen Sie Hex an den Symbolnamen an, um die Standardfarbe als Hex -Zeichenfolge zu verwenden

 import { SiReact , SiReactHex } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = { SiReactHex } size = { 24 } /> ;
} 

Benutzerdefinierte Stile

 import { SiReact } from '@icons-pack/react-simple-icons' ;

function CustomStyles ( ) {
  return < SiReact className = 'myStyle' /> ;
} 

. myStyle {
  width : 35 px ;
  height : 35 px ;
}