ikun-uiInstallation
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/presetpnpm add @ikun-ui/core && pnpm add -D unocss && pnpm add -D @ikun-ui/presetbash
yarn add @ikun-ui/core && yarn add -D unocss && pnpm add -D @ikun-ui/presetyarn add @ikun-ui/core && yarn add -D unocss && pnpm add -D @ikun-ui/presetbash
npm install @ikun-ui/core && npm install unocss -D && pnpm add -D @ikun-ui/presetnpm install @ikun-ui/core && npm install unocss -D && pnpm add -D @ikun-ui/presetUse
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/carbonpnpm add -D @iconify-json/carbonbash
yarn add -D @iconify-json/carbonyarn add -D @iconify-json/carbonbash
npm install @iconify-json/carbonnpm install @iconify-json/carbonCustom 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()}}`
}
]
});