JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 36
  • Score
    100M100P100Q94459F
  • License MIT

Package Exports

  • @waset/unplugin-iconify
  • @waset/unplugin-iconify/astro
  • @waset/unplugin-iconify/esbuild
  • @waset/unplugin-iconify/farm
  • @waset/unplugin-iconify/nuxt
  • @waset/unplugin-iconify/rollup
  • @waset/unplugin-iconify/rspack
  • @waset/unplugin-iconify/types
  • @waset/unplugin-iconify/vite
  • @waset/unplugin-iconify/webpack

Readme

unplugin-iconify

NPM version

Install

pnpm i -D @waset/unplugin-iconify

Configuration

Iconify({
  convert: {
    icon: './icons',
    svg: {
      path: './icons',
      noColor: true,
    },
    suffix: {
      path: './icons',
      noColor: true,
      suffix: 'color',
    },
  },
  output: 'dist/icons', // @default 'node_modules/.unplugin-iconify'
  iconifyIntelliSense: true, // @default false
})
  • 如果开启 iconifyIntelliSense,将自动创建/更新 .vscode/settings.json 文件,用于 VSCode 插件 Iconify IntelliSense

  • convert 选项用于将图标转换为图标集,请查看 src/core/types.ts 获取更多类型信息。

Usage

Vite
// vite.config.ts
import Iconify from '@waset/unplugin-iconify/vite'

export default defineConfig({
  plugins: [
    Iconify({
      // ...
    })
  ],
})
Nuxt
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    // ...
    '@waset/unplugin-iconify/nuxt'
  ],
  Iconify: {
    // ...
  },
})
unocss
// uno.config.ts
import { UnocssLoader } from '@waset/unplugin-iconify/loader'
import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    // ...
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
      collections: {
        ...UnocssLoader(),
      },
    }),
  ],
  // ...
})

Thanks