optimall-icons

v1.0.15

Published

3 months ago

Biblioteca de ícones do Optimall

Downloads

0High
0Medium
0Low

brunopinheirodesign

icons react components iconography system icons

Optimall Icons

Biblioteca de ícones do Optimall com mais de 200 ícones otimizados, disponível para React, HTML/CSS puro (SVG Sprite) e Font Icons (iconfont).

🚀 Como Instalar

NPM

npm install optimall-icons

Yarn

yarn add optimall-icons

📦 Como Usar

Importação Individual (Recomendado)

import { HomeIcon, UserIcon, SearchIcon } from "optimall-icons";

function App() {
	return (
		<div>
			<HomeIcon />
			<UserIcon />
			<SearchIcon />
		</div>
	);
}

Importação Completa

import * as Icons from "optimall-icons";

function App() {
	return (
		<div>
			<Icons.HomeIcon />
			<Icons.UserIcon />
		</div>
	);
}

⚙️ Configurações dos Ícones

Propriedades Disponíveis

Todos os ícones suportam as seguintes propriedades:

| Propriedade | Tipo | Padrão | Descrição | | ---------------- | --------------- | ---------------- | ----------------------------------- | | size | string/number | 24 | Tamanho do ícone (width e height) | | className | string | - | Classes CSS personalizadas | | style | object | - | Estilos CSS inline | | ariaLabel | string | Nome do ícone | Label para acessibilidade | | width | string/number | size | Largura do ícone (sobrescreve size) | | height | string/number | size | Altura do ícone (sobrescreve size) | | fill | string | "currentColor" | Cor de preenchimento | | Outras props SVG | - | - | Qualquer propriedade SVG válida |

Exemplos de Configuração

Alterando Tamanho

// Nova propriedade size (recomendado) ✨
<HomeIcon size={24} />        // 24x24 (padrão)
<HomeIcon size={32} />        // 32x32
<HomeIcon size="2rem" />      // 2rem x 2rem

// Tamanho específico (width e height sobrescrevem size)
<HomeIcon width={40} height={20} />  // 40x20 (retângulo)
<HomeIcon size={32} width={40} />    // 40x32 (width sobrescreve)

// Usando CSS
<HomeIcon style={{ width: '2rem', height: '2rem' }} />

// Com className
<HomeIcon className="w-8 h-8" />

Alterando Cor

// Cor específica
<HomeIcon style={{ color: '#3B82F6' }} />

// Usando CSS
<HomeIcon className="text-blue-500" />

// Cor de preenchimento direta
<HomeIcon fill="#ef4444" />

Customização Avançada

<UserIcon
	size={40}
	className="user-icon"
	style={{
		color: "#10B981",
		cursor: "pointer",
		transition: "color 0.2s",
	}}
	ariaLabel="Perfil do usuário"
	onClick={() => console.log("Clicado!")}
/>

Responsividade

Os ícones são vetoriais e se adaptam perfeitamente a diferentes tamanhos:

// Responsivo com Tailwind CSS
<HomeIcon className="w-4 h-4 sm:w-6 sm:h-6 lg:w-8 lg:h-8" />

// Responsivo com CSS
<HomeIcon
  style={{
    width: 'clamp(16px, 4vw, 32px)',
    height: 'clamp(16px, 4vw, 32px)'
  }}
/>

// Responsivo usando size (mais simples) ✨
<HomeIcon size="clamp(16px, 4vw, 32px)" />

Acessibilidade

Todos os ícones incluem suporte completo à acessibilidade:

// Label automático baseado no nome do ícone
<SearchIcon /> // aria-label="search"

// Label personalizado
<SearchIcon ariaLabel="Buscar produtos" />

// Ícone decorativo (sem label)
<SearchIcon ariaLabel="" />

🌐 Uso sem React

SVG Sprite (recomendado para HTML/CSS)

O sprite agrupa todos os ícones em um único arquivo para uso eficiente com <use>.

<!-- 1. Inline o sprite no topo do <body> (recomendado) -->
<!-- ou carregue externamente: -->
<object type="image/svg+xml" data="node_modules/optimall-icons/dist/sprite.svg" style="display:none"></object>

<!-- 2. Importe o CSS helper -->
<link rel="stylesheet" href="node_modules/optimall-icons/dist/sprite.css">

<!-- 3. Use qualquer ícone -->
<svg class="oi"><use href="node_modules/optimall-icons/dist/sprite.svg#add"></use></svg>
<svg class="oi"><use href="node_modules/optimall-icons/dist/sprite.svg#home"></use></svg>
<svg class="oi"><use href="node_modules/optimall-icons/dist/sprite.svg#search"></use></svg>

Controle cor e tamanho via CSS:

.oi {
  width: 24px;
  height: 24px;
  color: #333; /* herda via currentColor */
}

Os IDs no sprite correspondem ao nome do arquivo SVG (ex.: add-circle, arrow-right, user).

SVG Individuais

Cada ícone também está disponível como arquivo .svg avulso em dist/svg/:

<!-- Diretamente no HTML -->
<img src="node_modules/optimall-icons/dist/svg/home.svg" width="24" height="24" alt="Home">

<!-- Ou inline para controlar cor via CSS -->

Os arquivos SVG usam currentColor, portanto a cor pode ser controlada via CSS quando inlineados.

Font Icons (iconfont)

Para projetos que preferem usar fontes de ícones (estilo Font Awesome):

<!-- 1. Importe o CSS da fonte -->
<link rel="stylesheet" href="node_modules/optimall-icons/dist/fonts/optimall-icons.css">

<!-- 2. Use qualquer ícone com a tag <i> -->
<i class="oicon oicon-add"></i>
<i class="oicon oicon-home"></i>
<i class="oicon oicon-search"></i>

Controle cor e tamanho via CSS:

.oicon {
  font-size: 24px;
  color: #333;
}

O mapeamento completo de nome → classe está em dist/fonts/optimall-icons.json.

Os nomes das classes seguem o padrão oicon-<nome-do-arquivo-svg>, ex.:

add.svg → oicon-add
arrow-right.svg → oicon-arrow-right
user-account.svg → oicon-user-account

🗂️ Lista de Ícones

Para ver todos os 195 ícones disponíveis organizados por categoria, consulte o arquivo ICONS.md.

📄 Licença

🔗 Links

Homepage

Feito com ❤️ pela equipe Optimall