§@gravity-ui/icons ·

Um pacote de ícones do Gravity UI. Os ícones têm duas fontes: SVG e React. Dê uma olhada na página showcase.

§Instalação

npm install --save-dev @gravity-ui/icons

§Uso

§React

import Cloud from '@gravity-ui/icons/Cloud';

ou

import {Cloud} from '@gravity-ui/icons';

§SVG

Você pode precisar de um loader apropriado para isso

import cloudIcon from '@gravity-ui/icons/svgs/cloud.svg';

§Licença

Distribuído sob a Licença MIT. Veja LICENSE para detalhes.

§Para agentes de IA

O conjunto oficial de ícones SVG para Gravity UI, fornecido como componentes React e arquivos .svg brutos para uso com o renderizador Icon do @gravity-ui/uikit.

§Quando usar

• Você precisa de um ícone dentro de um aplicativo Gravity UI e deseja um conjunto consistente e pronto para uso.
• Renderizando um ícone através do uikit: importe o componente do ícone aqui e passe-o para o Icon do uikit através da sua prop data.
• Você precisa do asset .svg bruto (por exemplo, para background-image em CSS ou um loader SVG em tempo de compilação) em vez de um componente React.

§Quando não usar

• Renderizando o ícone na tela — este pacote apenas fornece os glifos; o renderizador real (dimensionamento, cor, a11y) é o componente Icon do @gravity-ui/uikit.
• Você precisa de um ícone personalizado ou de marca que não esteja no conjunto — importe seu próprio SVG e passe-o para o Icon do uikit; não espere que ele esteja aqui.

§Armadilhas comuns

• Ícones são passados como dados, não por nome. Faça import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} /> — não existe uma API <Icon name="gear" />, e este pacote não exporta seu próprio componente <Icon>.
• O caminho de importação importa para o tree-shaking. import Cloud from '@gravity-ui/icons/Cloud' carrega um único ícone; import {Cloud} from '@gravity-ui/icons' também funciona, mas depende do bundler para fazer o tree-shake do barrel.
• Importações SVG precisam de um loader. import icon from '@gravity-ui/icons/svgs/cloud.svg' só funciona se o seu bundler estiver configurado para lidar com arquivos .svg.
• Tamanho e cor vêm do renderizador. Defina size no Icon do uikit e controle a cor com color/CSS currentColor; os próprios SVGs não carregam uma cor fixa.