Icons

INFO

Big thanks to unocss for the icons preset that this plugin is based on. This icons plugin is a wrapper around it to adapt it to PikaCSS.

Check the documentation for more information about the icons available and how to use them.

Installation

pnpm

pnpm add -D @pikacss/plugin-icons

yarn

yarn add -D @pikacss/plugin-icons

npm

npm install -D @pikacss/plugin-icons

Setup

Vite Project

// pika.config.ts
import Icons from '@pikacss/plugin-icons'
import { defineEngineConfig } from '@pikacss/vite-plugin-pikacss'

export default defineEngineConfig({
	plugins: [
		Icons({
			// options
		}),
	],
})

Nuxt Project

// pika.config.ts
import { defineEngineConfig } from '@pikacss/nuxt-pikacss'
import Icons from '@pikacss/plugin-icons'

export default defineEngineConfig({
	plugins: [
		Icons({
			// options
		}),
	],
})

Usage

The icons would be provided as shortcuts, so you can use them like this:

pika('i-mdi:home')