Icônes

Icônes is an icon explorer powered by Iconify that allows for instant, local fuzzy searching of icons. You can browse collections, filter by categories, and use the 'Bag' feature to select multiple icons and pack them into a ready-to-use icon font.

Key capabilities include:

• Instant Fuzzy Searching: All searches are performed locally without web queries.
• The Bag: Select icons to pack them into an icon font (utilizing svg-packer).
• Usage Scripts: Copy ready-to-use scripts for integrating icons into your projects.
• Direct Downloads: Download icons directly as SVG files.
• Collection Bookmarks: Save your favorite icon collections.

You can access the application at https://icones.js.org.

A VS Code extension is available to integrate Icônes functionality directly into your development environment. This extension was created by [@afzalsayed96].

https://github.com/afzalsayed96/vscode-icones

The icones project uses @antfu/eslint-config for linting. You can customize the ESLint configuration by passing an options object to the antfu() function.

Key configuration options used in this project:

• ignores: An array of glob patterns to exclude specific files or directories from linting. In this project, large data files like collections.json and release directories are ignored to improve performance.
• formatters: A boolean flag that, when set to true, enables ESLint formatters (e.g., for Prettier or other stylistic rules).

import antfu from '@antfu/eslint-config'

export default antfu(
  {
    ignores: [
      '**/src/assets/collections.json',
      '**/public/collections',
      '**/public/lib',
      '**/release',
      '**/collections-info.json',
      '**/collections-meta.json',
    ],
    formatters: true,
  },
)

To configure UnoCSS, use the defineConfig function. You can specify presets to extend functionality (like icon support or attribute mode), transformers to enable syntax features (like variant groups or CSS directives), and shortcuts to create reusable utility aliases. You can also define a custom theme for colors and other design tokens.

import { defineConfig, presetAttributify, presetIcons, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss'

export default defineConfig({
  shortcuts: {
    'border-base': 'border-hex-888/25',
    'icon-button': 'op50 hover:op100 my-auto shrink-0',
  },
  presets: [
    presetWind3(),
    presetIcons(),
    presetAttributify(),
  ],
  transformers: [
    transformerVariantGroup(),
    transformerDirectives(),
  ],
  theme: {
    colors: {
      primary: 'var(--theme-color)',
    },
  },
})

Use the following functions to manage the availability of icon sets in the application:

• downloadAndInstall(id: string): Fetches the icon set JSON from the static path, adds it to the active collections via addCollection, and marks it as installed.
• cacheCollection(id: string): A wrapper around downloadAndInstall that manages the inProgress and progressMessage states for UI feedback.
• tryInstallFromLocal(id: string): Attempts to load a collection from IndexedDB. Returns true if successful or if already installed.
• preInstall(): Iterates through all available collections and installs any that contain prepacked data.

Generates an SVG sprite containing <symbol> definitions for the specified icons and triggers a browser download for sprite.svg.

Options:

• size: The size of the icons (default: '1em').
• color: The color of the icons (default: 'currentColor').

The SVG utility module provides several low-level helpers for icon processing:

• PackType: Type definition for icon packing operations.
• bufferToString: Converts buffers to strings.
• ClearSvg: Removes specific elements or attributes from an SVG.
• LoadIconSvgs: Loads icon SVGs from a source.
• toComponentName: Converts a string (like an icon name) into a valid component name.
• normalizeZipFleName: Normalizes filenames within ZIP archives.

Icones tracks recently viewed items with built-in capacity limits (RECENT_COLLECTION_CAPACITY = 10, RECENT_ICONS_CAPACITY = 100).

Collections:

• pushRecentCollection(id: string): Adds an ID to the start of the recent list and removes duplicates.
• removeRecentCollection(id: string): Removes a specific collection ID.
• isRecentCollection(id: string): Checks if a collection is in the recent list.

Icons:

• pushRecentIcon(id: string): Adds an icon ID to the start of the recent list and removes duplicates.
• removeRecentIcon(id: string): Removes a specific icon ID.
• isRecentIcon(id: string): Checks if an icon is in the recent list.