semantic-ui-react-icon-picker

Seletor de ícones para projetos React com semantic-ui-react.

Instalação

npm install semantic-ui-react-icon-picker

Também é necessário ter react, react-dom e semantic-ui-react instalados no projeto.

Uso rápido

import { useState } from 'react'
import { IconDropdown } from 'semantic-ui-react-icon-picker'
import 'semantic-ui-react-icon-picker/dist/index.css'

type IconName = string | undefined

export function App() {
  const [icon, setIcon] = useState<IconName>()

  return (
    <IconDropdown
      value={icon}
      onChange={(nextIcon) => setIcon(nextIcon)}
    />
  )
}

API

IconDropdown

Dropdown pesquisável com todos os ícones disponíveis.

| Prop | Tipo | Obrigatória | Descrição | | --- | --- | --- | --- | | value | string \| undefined | Não | Ícone selecionado atualmente. | | onChange | (value: string \| undefined) => void | Não | Chamado ao selecionar/limpar um ícone. |

Comportamento

• Renderiza um Dropdown com search, clearable e selection.
• Ao limpar, onChange recebe undefined.

IconPickerModal

Modal com busca e rolagem infinita para escolha de ícone.

| Prop | Tipo | Obrigatória | Descrição | | --- | --- | --- | --- | | value | string \| undefined | Não | Ícone atual exibido no botão de trigger. | | onChange | (value: string) => void | Não | Chamado ao selecionar um ícone no modal. |

Comportamento

• Botão trigger mostra o ícone atual (ou texto Select Icon).
• Campo de busca filtra por nome.
• Lista carrega em páginas durante o scroll.
• Ao selecionar, fecha o modal e chama onChange.

Exemplos com TypeScript

IconDropdown com formulário

import { Form } from 'semantic-ui-react'
import { useState } from 'react'
import { IconDropdown } from 'semantic-ui-react-icon-picker'

type FormState = {
  icon?: string
}

export function SettingsForm() {
  const [formState, setFormState] = useState<FormState>({})

  return (
    <Form>
      <Form.Field>
        <label>Ícone</label>
        <IconDropdown
          value={formState.icon}
          onChange={(icon) => setFormState((prev) => ({ ...prev, icon }))}
        />
      </Form.Field>
    </Form>
  )
}

IconPickerModal com preview

import { useState } from 'react'
import { Icon } from 'semantic-ui-react'
import { IconPickerModal } from 'semantic-ui-react-icon-picker'

export function IconChooser() {
  const [icon, setIcon] = useState<string | undefined>('rocket')

  return (
    <div>
      <p>
        Selecionado: {icon ? <Icon name={icon} /> : 'nenhum'}
      </p>
      <IconPickerModal
        value={icon}
        onChange={(nextIcon) => setIcon(nextIcon)}
      />
    </div>
  )
}

Compatibilidade React e semantic-ui-react

A matriz abaixo reflete exatamente as combinações exercitadas na CI (.github/workflows/ci.yml).

Smoke matrix (testes unitários rápidos)

| React / ReactDOM | semantic-ui-react 2.1.5 (stable) | semantic-ui-react 3.0.0-beta.2 (beta) | | --- | --- | --- | | 16.14.0 | ✅ testado | ❌ excluído (combinação não suportada) | | 17.0.2 | ✅ testado | ❌ excluído (combinação não suportada) | | 18.3.1 | ✅ testado | ✅ testado | | 19.2.0 | ✅ testado | ✅ testado |

Full matrix (suite completa)

| React / ReactDOM | semantic-ui-react | Escopo | | --- | --- | --- | | 16.14.0 | 2.1.5 | unit + build | | 18.3.1 | 2.1.5 | unit + build | | 19.2.0 | 3.0.0-beta.2 | unit + build |

Documentação adicional

• Migração
• Contribuição
• Changelog

Project Scope & Compatibility

Package scope

This package provides a focused icon picker component for semantic-ui-react applications. The objective is to keep the component lightweight and easy to integrate while preserving compatibility with the semantic-ui-react icon ecosystem.

Supported versions

Current compatibility is defined by peerDependencies and by the CI matrix documented above.

| Package | Supported versions | Notes | | --- | --- | --- | | react / react-dom | >=16.14.0 | CI cobre majors 16, 17, 18 e 19 em combinações explícitas. | | semantic-ui-react | >=2.1.5 | CI cobre a linha estável 2.1.5 e beta 3.0.0-beta.2. |

Known limitations

• The component is currently scoped to the icon set and behavior exposed by semantic-ui-react.
• No guarantee is currently provided for React 17+ without explicit validation in this repository.
• This package does not include a design-system abstraction layer for non-Semantic UI libraries.

Major version support policy

• Current major (1.x): active support for bug fixes, docs, and compatibility updates.
• Previous majors: best-effort support only; critical fixes may be backported selectively.
• Breaking changes are released only in a new major version and must include migration notes in the changelog/README.

Feature PR acceptance criteria

Feature pull requests are accepted when they:

1. Stay aligned with the package scope (icon picker for semantic-ui-react).
2. Preserve backward compatibility for the current major version, unless the PR is explicitly targeted for the next major.
3. Include tests (or a justified test strategy) covering new behavior.
4. Keep API surface minimal and clearly document new props/behavior in the README.
5. Avoid introducing heavy dependencies without clear maintenance and bundle-size justification.

License

MIT © Sam Knutson

CI and release

• CI runs lint, typecheck, tests, and build on Node LTS matrix via .github/workflows/ci.yml.
• Releases are published to npm via .github/workflows/release.yml only when a maintainer publishes a GitHub Release (release.published).
• Publishing includes security/provenance safeguards (npm audit --omit=dev, dry-run, version guard, and npm publish --provenance).
• Follow the full release runbook in docs/release.md.
• See CONTRIBUTING.md for branch protection gates and release governance.