@aleph-alpha/ds-icons v0.8.4

Aleph Alpha Design System Icons

@aleph-alpha/ds-icons

This package provides the Aleph Alpha Design System Icons preset for UnoCSS, including custom icons from the design system. It uses the Icons preset for UnoCSS and adds Aleph Alpha specific icons.

To use the Aleph Alpha Design System Icons preset, install the package and add it to your UnoCSS configuration.

npm install @aleph-alpha/ds-icons

import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons'

export default defineConfig({
  presets: [presetAlephAlphaIcons()],
})

The preset icons are taken from the material symbols, one can use them like so

<span class="i-material-symbols-{$SYMBOL_NAME}" />, e.g.
<span class="i-material-symbols-translate" />

Available icons can be found in https://icones.js.org/collection/material-symbols

To add custom icons that are used locally in your project, you can follow the guide at https://unocss.dev/presets/icons#filesystemiconloader

import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'

export default defineConfig({
  presets: [presetAlephAlphaIcons({ collections: {
    'studio' : FileSystemIconLoader(
          './assets/icons',
          svg => svg.replace(/#fff/, 'currentColor')
      )
  } })],
})

For more information about the Icons preset, see UnoCSS Icons Preset.