react simple icons

reaccionamiento-ácidos

Este paquete proporciona los iconos simples 13.18.0 empaquetados como un conjunto de componentes React.

Instalación

Instale el paquete en el directorio de su proyecto con:

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

Soporte mecanografiado

Uso

Puede usar SimpleIcons.org para encontrar un icono específico. Al importar un icono, tenga en cuenta que los nombres de los iconos son uppercamelcase, por ejemplo:

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

Manifestación

Editar Codesandbox

Ejemplo básico

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

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

Cambiar título

@icons-pack/react-simple-icons proporciona un título predeterminado que se refiere al nombre del componente

El elemento <title> proporciona una descripción de texto corto accesible de cualquier elemento de contenedor SVG o 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 } /> ;
} 

Usar color predeterminado

Establezca el color como default para usar el color predeterminado para cada icono

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

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

Use el color predeterminado como hex

Agregue Hex del nombre del icono para usar el color predeterminado como cadena hex

 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 ;
}