react simple icons

i-icons réagi

Ce package fournit les icônes simples 13.18.0 emballées sous forme de composants React.

Installation

Installez le package dans votre répertoire de projet avec:

// 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

Support dactylographié

Usage

Vous pouvez utiliser SimpleIcons.org pour trouver une icône spécifique. Lors de l'importation d'une icône, gardez à l'esprit que les noms des icônes sont UpperCamelCase, par exemple:

• Material Design est exposée comme { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps est exposée comme { SiAzuredevops } from @icons-pack/react-simple-icons

Démo

Modifier les codes et boîte

Exemple de base

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

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

Titre de changement

@icons-pack/react-simple-icons fournit un titre par défaut se référant au nom du composant

L'élément <title> fournit une description accessible en texte court de tout élément de conteneur SVG ou élément graphique.

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

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

Utiliser la couleur par défaut

Définir la couleur par default pour utiliser la couleur par défaut pour chaque icône

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

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

Utilisez la couleur par défaut comme hex

Ajoutez Hex au nom de l'icône pour utiliser la couleur par défaut comme chaîne hexagonale

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

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

Styles personnalisés

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

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

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