react simple icons

React-simple-icons

Este pacote fornece os ícones simples 13.18.0 embalados como um conjunto de componentes do React.

Instalação

Instale o pacote no diretório do seu projeto com:

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

Suporte TypeScript

Uso

Você pode usar o Simpleicons.org para encontrar um ícone específico. Ao importar um ícone, lembre -se de que os nomes dos ícones são uppercamelcase, por exemplo:

• Material Design é exposto como { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps está exposto como { SiAzuredevops } from @icons-pack/react-simple-icons

Demonstração

Editar códigos e caixa

Exemplo básico

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

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

Alterar o título

@icons-pack/react-simple-icons fornece um título padrão referente ao nome do componente

O elemento <title> fornece uma descrição acessível de texto curto de qualquer elemento de contêiner SVG ou elemento gráfico.

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

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

Use a cor padrão

Defina a cor como default para usar a cor padrão para cada ícone

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

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

Use a cor padrão como hexadecimal

Anexe Hex ao nome do ícone para usar a cor padrão como string hexadecimal

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

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

Estilos personalizados

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

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

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