Preset Icoane

Utilizați orice icoană cu CSS Pur pentru UnoCSS.

Codul Sursă

TIP

Recomandare pentru lectură: Icoane în CSS Pur

Urmați următoarele convenții pentru a utiliza icoanele

• <prefix><collection>-<icon>
• <prefix><collection>:<icon>

De exemplu:

<!-- O icoană de ancoră de bază din Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- O alarmă portocalie din Material Design Icons -->
<div class="i-mdi-alarm text-orange-400" />
<!-- Un logo Vue mare -->
<div class="i-logos-vue text-3xl" />
<!-- Soare în mod light, Lună în mod dark, din Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji de ras, se transformă în plâns la hover -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

Hover it

Verificați toate icoanele disponibile.

Instalare

pnpm

pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

yarn

yarn add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

npm

npm install -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

bun

bun add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

Folosim Iconify ca sursa noastră de date pentru icoane. Trebuie să instalați setul de icoane corespunzător în devDependencies urmând modelul @iconify-json/*. De exemplu, @iconify-json/mdi pentru Material Design Icons, @iconify-json/tabler pentru Tabler. Puteți consulta Icônes sau Iconify pentru toate colecțiile disponibile.

import presetIcons de la '@unocss/preset-icons'
import { defineConfig } de la 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ /* opțiuni */ }),
    // ...alte preset-uri
  ],
})

TIP

Acest preset este inclus în pachetul unocss, îl puteți importa și de acolo:

import { presetIcons } de la 'unocss'

INFO