beviicon-react v1.0.3

Como começar

Instalação

npm i -D @types/bevi-icon-react

Aplicação

import React from 'react'
import BvIcon from 'bevi-icon-react'

const Page = () => {
  return (
    <BvIcon name={'cube'}/>
  )
}

export default Page

Variações

Solid

<BvIcon variation={'solid'} name={'cube'}/>

Duo

<BvIcon variation={'duo'} name={'cube'}/>

Dark

<BvIcon variation={'dark'} name={'cube'}/>

Light

<BvIcon variation={'light'} name={'cube'}/>

Tamanho

Padrão

Por padrão o tamanho de todos os ícones é de 32px/2rem.

Editando

É possível definir o tamanho do ícone de forma simples utilizando o atributo de size presente no componente, o valor presente no size será aplicado com a unidade de medida rem

<BvIcon variation={'light'} name={'cube'} size={4} />

Acessibilidade

aria-hidden

Caso o ícone seja aplicado apenas de forma decorativa, não tem a necessidade de anunciar-lo, já que o conteúdo em volta fará isso.

<BvIcon variation={'duo'} name={'cube'} hidden={true}/>

title

Caso seja necessário, é possível adicionar um título ao ícone que será aplicado com a tag de título presente no HTML.

<BvIcon variation={'duo'} name={'cube'} title={'Título do ícone'}/>

label

Também é possível acrescentar legenda ao ícone caso a descrição seja necessária.

<BvIcon variation={'duo'} name={'cube'} label={'Legenda do ícone'} />

Estilização

Padrão

Ao aplicar no projeto, o ícone receberá automaticamente classes css com seu respectivo nome para estilização mais fácil.

ícone no arquivo jsx/tsx:

<BvIcon variation={'duo'} name={'cube'} />

Ícone gerado:

<svg 
  width="..." 
  height="..." 
  viewBox="... ... ... ..." 
  data-icon="bv-cube" 
  class="bv-icon bv-cube" 
  fill="..." 
  xmlns="...">
  ...
</svg>

Estilização específica

Também é possível adicionar seu próprio estilo ao ícone, com o atributo já conhecido no react className="" dessa forma:

<BvIcon 
  variation={'duo'} 
  name={'cube'} 
  className={`${style.bvIcon} color-primary-01`} />