Skip to content
On this page

Installation

This section explains how to properly install and use an Ikun UI.

bash
pnpm add @ikun-ui/core && pnpm add -D unocss && pnpm add -D @ikun-ui/preset
pnpm add @ikun-ui/core && pnpm add -D unocss && pnpm add -D @ikun-ui/preset
bash
yarn add @ikun-ui/core && yarn add -D unocss && pnpm add -D @ikun-ui/preset
yarn add @ikun-ui/core && yarn add -D unocss && pnpm add -D @ikun-ui/preset
bash
npm install @ikun-ui/core && npm install unocss -D && pnpm add -D @ikun-ui/preset
npm install @ikun-ui/core && npm install unocss -D && pnpm add -D @ikun-ui/preset

Use

typescript
/*App.svelte*/
<script lang="ts">
    import { KButton } from "@ikun-ui/core";
    import 'virtual:uno.css'
</script>
<KButton>KButton</KButton>
/*App.svelte*/
<script lang="ts">
    import { KButton } from "@ikun-ui/core";
    import 'virtual:uno.css'
</script>
<KButton>KButton</KButton>

Custom UnoCSS config

install icon

bash
pnpm add -D @iconify-json/carbon
pnpm add -D @iconify-json/carbon
bash
yarn add -D @iconify-json/carbon
yarn add -D @iconify-json/carbon
bash
npm install @iconify-json/carbon
npm install @iconify-json/carbon

Custom your UnoCSS config:

ts
// unocss.config.ts
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss';
import { presetIkun, getCSSPreflights, getSafeList } from '@ikun-ui/preset';

export default defineConfig({
	presets: [presetUno(), presetAttributify(), presetIcons(), presetIkun()],
	safelist: [...getSafeList()],
	preflights: [
		{
			layer: 'base',
			getCSS: () => `:root {${getCSSPreflights()}}`
		}
	]
});
// unocss.config.ts
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss';
import { presetIkun, getCSSPreflights, getSafeList } from '@ikun-ui/preset';

export default defineConfig({
	presets: [presetUno(), presetAttributify(), presetIcons(), presetIkun()],
	safelist: [...getSafeList()],
	preflights: [
		{
			layer: 'base',
			getCSS: () => `:root {${getCSSPreflights()}}`
		}
	]
});

MIT Licensed