{"_id":"@abydahana/iconpicker","_rev":"2-b4be44c4b7e9fe9a7c438f54f5546d57","name":"@abydahana/iconpicker","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@abydahana/iconpicker","version":"1.0.0","keywords":["iconpicker","icon-picker","icons","popover","mdi","fontawesome","bootstrap-icons","tabler-icons","remixicon","boxicons","lucide","aksara-ui","tailwind"],"author":{"name":"Aby Dahana"},"license":"MIT","_id":"@abydahana/iconpicker@1.0.0","maintainers":[{"name":"abydahana","email":"abydahana@gmail.com"}],"dist":{"shasum":"c7f5cb7c1b92574cfb9d3359cd6c57e22693c983","tarball":"https://registry.npmjs.org/@abydahana/iconpicker/-/iconpicker-1.0.0.tgz","fileCount":90,"integrity":"sha512-ZmEPYe0rNZdFWWuKK18Qqlav84TZgWpLyFt/UVkXoGqdm/Np/7TQDe94Z+GUymGpDoFtSKT6rG9tbJ4Xf5WCnA==","signatures":[{"sig":"MEYCIQD95IAWpFXRgrKfc0C1rt2ZxiDNJjLPOotJglD+bZZhxgIhAMEQ2fAcIduUISkXFvJD5Yif1IA7Mvrx1q2xsYVWA/OM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1459455},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./css":"./dist/iconpicker.css","./src":{"types":"./src/index.ts","import":"./src/index.ts","default":"./src/index.ts"},"./themes/*":"./dist/themes/*"},"gitHead":"2bbab0785ef7075485596777e67e9b6772e870ad","scripts":{"all":"npm run format && npm run lint && npm run build","lint":"eslint src build.ts scripts eslint.config.js","build":"node --import tsx build.ts","check":"tsc --noEmit","format":"prettier --write . && eslint src build.ts scripts eslint.config.js --fix","lint:fix":"eslint src build.ts scripts eslint.config.js --fix","format:check":"prettier --check . && eslint src build.ts scripts eslint.config.js","prepublishOnly":"npm run all"},"_npmUser":{"name":"abydahana","email":"abydahana@gmail.com"},"_npmVersion":"10.8.2","description":"Universal, framework-agnostic floating popover icon picker with multi-pack support","directories":{},"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.19.3","eslint":"^10.10.0","prettier":"^3.9.6","@eslint/js":"^10.0.1","typescript":"^5.8.2","@types/node":"^26.4.1","typescript-eslint":"^8.69.0","eslint-config-prettier":"^10.1.8"},"_npmOperationalInternal":{"tmp":"tmp/iconpicker_1.0.0_1788737537815_0.30295884144536833","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@abydahana/iconpicker","version":"1.0.1","description":"Universal, framework-agnostic floating popover icon picker with multi-pack support","author":{"name":"Aby Dahana"},"license":"MIT","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./src":{"types":"./src/index.ts","import":"./src/index.ts","default":"./src/index.ts"},"./css":"./dist/iconpicker.css","./themes/*":"./dist/themes/*"},"publishConfig":{"access":"public"},"scripts":{"build":"node --import tsx build.ts","check":"tsc --noEmit","lint":"eslint src build.ts scripts eslint.config.ts","lint:fix":"eslint src build.ts scripts eslint.config.ts --fix","format":"prettier --write . && eslint src build.ts scripts eslint.config.ts --fix","format:check":"prettier --check . && eslint src build.ts scripts eslint.config.ts","all":"npm run format && npm run lint && npm run build","prepublishOnly":"npm run all"},"keywords":["iconpicker","icon-picker","icons","popover","mdi","fontawesome","bootstrap-icons","tabler-icons","remixicon","boxicons","lucide","aksara-ui","tailwind"],"devDependencies":{"@eslint/js":"^10.0.1","@types/node":"^26.4.1","eslint":"^10.10.0","eslint-config-prettier":"^10.1.8","jiti":"^2.7.0","prettier":"^3.9.6","tsx":"^4.19.3","typescript":"^5.8.2","typescript-eslint":"^8.69.0"},"_id":"@abydahana/iconpicker@1.0.1","gitHead":"40c2ab788b111dbdad1d85801683cba4bd885f41","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jFdDsQfF7NScR1zf+luMpLg2Bed0dNpqtIrPKqxrSkugF25/QNacGnJOBBfg8cmy4ookBGBgDk1SxutuWb+xVw==","shasum":"a75e02b21c16f035eb9faff1366725b1959ff16d","tarball":"https://registry.npmjs.org/@abydahana/iconpicker/-/iconpicker-1.0.1.tgz","fileCount":90,"unpackedSize":1460790,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVEBtG9GztI1YsTOnkj9WFy41XRBg9Ea4wxKJYq9iVLwIgBTPbFv3TGiHk8EFaCXZnuSoK0kwwFAmkWB8KdWen83w="}]},"_npmUser":{"name":"abydahana","email":"abydahana@gmail.com"},"directories":{},"maintainers":[{"name":"abydahana","email":"abydahana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/iconpicker_1.0.1_1788743883891_0.14642252888926754"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-06T23:32:17.688Z","modified":"2026-09-07T01:18:04.199Z","1.0.0":"2026-09-06T23:32:17.984Z","1.0.1":"2026-09-07T01:18:04.057Z"},"author":{"name":"Aby Dahana"},"license":"MIT","keywords":["iconpicker","icon-picker","icons","popover","mdi","fontawesome","bootstrap-icons","tabler-icons","remixicon","boxicons","lucide","aksara-ui","tailwind"],"description":"Universal, framework-agnostic floating popover icon picker with multi-pack support","maintainers":[{"name":"abydahana","email":"abydahana@gmail.com"}],"readme":"# IconPicker\n\nFloating popover icon picker with multi-pack support and real-time search.\n\n---\n\n## Features\n\n- Floating popover with auto-positioning and collision flip.\n- Built-in framework themes: Aksara UI, Bootstrap 5, Tailwind CSS, and Default.\n- Multi-pack support: MDI, FontAwesome 6 Free, Bootstrap Icons, Tabler Icons, Remix Icon, Boxicons, and Lucide.\n- Lazy chunk rendering for smooth scrolling across 7,000+ icons.\n- Instant search and filtering.\n- On-demand webfont loading.\n- Zero runtime dependencies.\n\n---\n\n## Installation\n\n```bash\nnpm install @abydahana/iconpicker\n```\n\nOr using yarn / pnpm:\n\n```bash\nyarn add @abydahana/iconpicker\npnpm add @abydahana/iconpicker\n```\n\n---\n\n## Framework Integration\n\n### 1. Aksara UI\n\n```ts\nimport \"@abydahana/aksara-ui/css\";\nimport \"@abydahana/iconpicker/css\";\nimport { IconPicker } from \"@abydahana/iconpicker\";\n```\n\n```html\n<div class=\"input-group input-group-sm\">\n  <span class=\"input-group-text\" role=\"button\" title=\"Choose icon\">\n    <i class=\"menu-item-input-icon-preview mdi mdi-view-dashboard-outline\"></i>\n  </span>\n  <input\n    type=\"text\"\n    id=\"menu-icon-input\"\n    class=\"form-control form-control-sm\"\n    value=\"mdi mdi-view-dashboard-outline\"\n    placeholder=\"e.g. mdi mdi-home\"\n  />\n</div>\n```\n\n```ts\nconst input = document.getElementById(\"menu-icon-input\") as HTMLInputElement;\n\nnew IconPicker(input, {\n  theme: \"aksara\",\n  iconSets: [\"mdi\"],\n  defaultSet: \"mdi\",\n  placement: \"bottom-start\",\n  onSelect(icon) {\n    const preview = input.parentElement?.querySelector(\".menu-item-input-icon-preview\");\n    if (preview) {\n      preview.className = `menu-item-input-icon-preview ${icon.className}`;\n    }\n  }\n});\n```\n\n---\n\n### 2. Bootstrap 5\n\n```ts\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"@abydahana/iconpicker/css\";\nimport { IconPicker } from \"@abydahana/iconpicker\";\n```\n\n```html\n<div class=\"input-group\">\n  <span class=\"input-group-text\">\n    <i class=\"bi bi-star\"></i>\n  </span>\n  <input type=\"text\" id=\"bs-icon-input\" class=\"form-control\" placeholder=\"Select icon\" value=\"bi bi-star\" />\n</div>\n```\n\n```ts\nnew IconPicker(\"#bs-icon-input\", {\n  theme: \"bootstrap\",\n  iconSets: [\"bi\", \"fa\"],\n  defaultSet: \"bi\",\n  placement: \"bottom-start\",\n  onSelect(icon) {\n    console.log(\"Selected icon:\", icon.className);\n  }\n});\n```\n\n---\n\n### 3. Tailwind CSS\n\n```css\n@import \"tailwindcss\";\n@import \"@abydahana/iconpicker/css\";\n```\n\n```html\n<div\n  class=\"relative flex items-center rounded-lg shadow-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden max-w-sm\"\n>\n  <div class=\"flex items-center justify-center pl-3 text-slate-500\">\n    <i class=\"lucide lucide-heart text-base\"></i>\n  </div>\n  <input\n    type=\"text\"\n    id=\"tailwind-icon-input\"\n    class=\"w-full py-2 pl-3 pr-4 text-sm text-slate-900 dark:text-slate-100 bg-transparent border-0 focus:outline-none\"\n    placeholder=\"Pick icon...\"\n    value=\"lucide lucide-heart\"\n  />\n</div>\n```\n\n```ts\nimport { IconPicker } from \"@abydahana/iconpicker\";\n\nnew IconPicker(\"#tailwind-icon-input\", {\n  theme: \"tailwind\",\n  iconSets: [\"lucide\", \"tabler\", \"remix\"],\n  defaultSet: \"lucide\",\n  placement: \"bottom-start\"\n});\n```\n\n---\n\n### 4. Vanilla JavaScript / HTML\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>Icon Picker Demo</title>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@abydahana/iconpicker/dist/iconpicker.css\" />\n  </head>\n  <body>\n    <div style=\"margin: 40px;\">\n      <input type=\"text\" id=\"plain-icon\" placeholder=\"Click to choose icon...\" />\n    </div>\n\n    <script type=\"module\">\n      import { IconPicker } from \"https://cdn.jsdelivr.net/npm/@abydahana/iconpicker/dist/index.js\";\n\n      new IconPicker(\"#plain-icon\", {\n        theme: \"default\",\n        iconSets: [\"mdi\", \"bi\", \"boxicons\"],\n        defaultSet: \"mdi\"\n      });\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Supported Icon Sets\n\n| Identifier | Name                  | Total Icons | Class Prefix / Output Format                 |\n| ---------- | --------------------- | ----------- | -------------------------------------------- |\n| `mdi`      | Material Design Icons | 7,448       | `mdi mdi-{name}`                             |\n| `fa`       | FontAwesome 6 Free    | 1,895       | `fa-solid fa-{name}` / `fa-brands fa-{name}` |\n| `bi`       | Bootstrap Icons       | 2,050       | `bi bi-{name}`                               |\n| `tabler`   | Tabler Icons          | 4,879       | `ti ti-{name}`                               |\n| `remix`    | Remix Icon            | 2,892       | `ri-{name}`                                  |\n| `boxicons` | Boxicons              | 814         | `bx bx-{name}`                               |\n| `lucide`   | Lucide Icons          | 1,807       | `lucide lucide-{name}`                       |\n\nWhen passing a single set (e.g. `iconSets: [\"mdi\"]`), the tab bar automatically hides.\n\n---\n\n## Options\n\n```ts\ninterface IconPickerOptions {\n  theme?: \"aksara\" | \"bootstrap\" | \"tailwind\" | \"default\";\n  placement?: \"bottom-start\" | \"bottom-end\" | \"bottom\" | \"top-start\" | \"top-end\" | \"top\" | \"auto\";\n  iconSets?: (string | IconSetDefinition)[];\n  defaultSet?: string;\n  searchPlaceholder?: string;\n  value?: string;\n  container?: HTMLElement | string;\n  showTabs?: boolean;\n  showFooter?: boolean;\n  closeOnSelect?: boolean;\n  emptyText?: string;\n  itemsPerPage?: number;\n  loadFonts?: boolean;\n  fontUrls?: Record<string, string>;\n  onSelect?: (icon: IconItem) => void;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n```\n\n| Parameter           | Type                    | Default               | Description                                                          |\n| ------------------- | ----------------------- | --------------------- | -------------------------------------------------------------------- |\n| `theme`             | `string`                | `'default'`           | Theme preset (`'aksara'`, `'bootstrap'`, `'tailwind'`, `'default'`). |\n| `placement`         | `string`                | `'bottom-start'`      | Popover position relative to target element.                         |\n| `iconSets`          | `array`                 | `['mdi', 'fa', ...]`  | Array of icon set IDs or custom definitions.                         |\n| `defaultSet`        | `string`                | `'mdi'`               | Initial active tab.                                                  |\n| `searchPlaceholder` | `string`                | `'Search icons...'`   | Search input placeholder.                                            |\n| `value`             | `string`                | `''`                  | Initial selected class name.                                         |\n| `container`         | `HTMLElement \\| string` | `document.body`       | Element where popover is appended.                                   |\n| `showTabs`          | `boolean`               | `true`                | Show/hide icon set tabs (auto-hidden when <= 1 set).                 |\n| `showFooter`        | `boolean`               | `true`                | Show/hide selected icon preview footer.                              |\n| `closeOnSelect`     | `boolean`               | `true`                | Close popover when an icon is picked.                                |\n| `emptyText`         | `string`                | `'No icons found...'` | Message when no search results match.                                |\n| `itemsPerPage`      | `number`                | `120`                 | Virtualized chunk size when scrolling.                               |\n| `loadFonts`         | `boolean`               | `true`                | Auto-inject CDN stylesheets when switching tabs.                     |\n| `fontUrls`          | `object`                | `{}`                  | Custom CDN font URLs per set.                                        |\n| `onSelect`          | `function`              | `undefined`           | Callback: `(icon: IconItem) => void`.                                |\n| `onOpen`            | `function`              | `undefined`           | Callback when popover opens.                                         |\n| `onClose`           | `function`              | `undefined`           | Callback when popover closes.                                        |\n\n---\n\n## Methods\n\n```ts\nconst picker = new IconPicker(\"#icon-input\", options);\n\npicker.open();\npicker.close();\npicker.toggle();\npicker.getValue();\npicker.setValue(\"mdi mdi-check\");\npicker.destroy();\n```\n\n---\n\n## Custom Icon Sets\n\n```ts\nimport { IconPicker } from \"@abydahana/iconpicker\";\n\nconst customSet = {\n  id: \"custom\",\n  title: \"My Custom Icons\",\n  prefix: \"app-icon-\",\n  formatter: (name: string) => `app-icon app-icon-${name}`,\n  icons: [\"home\", \"profile\", \"settings\", \"download\"]\n};\n\nnew IconPicker(\"#my-input\", {\n  iconSets: [customSet, \"mdi\"],\n  defaultSet: \"custom\"\n});\n```\n\n---\n\n## Development\n\n```bash\n# Format, lint, and build all at once\nnpm run all\n\n# Build TypeScript and CSS bundles\nnpm run build\n\n# Type check\nnpm run check\n\n# Lint source files\nnpm run lint\n\n# Automatically fix linting issues\nnpm run lint:fix\n\n# Format code with Prettier and ESLint\nnpm run format\n\n# Verify formatting and linting\nnpm run format:check\n```\n\n---\n\n## License\n\nMIT © Aby Dahana\n","readmeFilename":"README.md"}