YouCan Developer

Appearance

Icons Installation ​

A quick walkthrough to show you how you can install YouCan UI icons and use them in your project.

Install the Icons ​

Install the YouCan UI icons package:

bash
npm install @youcan/ui-icons

Set Up UnoCSS ​

We use unocss as the engine that provides our icons to our users. Therefore, to be able to use the icons you must first install unocss in your project. Follow the steps below for Vite and Nuxt 3 setups.

Setup with Vite ​

  1. Install UnoCSS as a development dependency:
bash
npm install -D unocss
  1. Add UnoCSS to your vite.config.ts file to enable its functionality:
ts
// vite.config.ts
import UnoCSS from 'unocss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [UnoCSS()],
});
  1. Include UnoCSS in the top level of your application:
bash
  import 'uno.css';

Setup with Nuxt 3 ​

  1. Add UnoCSS and its Nuxt integration to your project:
bash
npm install -D unocss @unocss/nuxt
  1. Update your nuxt.config.ts file to include UnoCSS and necessary styles:
ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
  css: ["@youcan/ui-core/tokens", "@youcan/alto/style"],
});

Configure UnoCSS ​

To configure UnoCSS, Create a uno.config.ts in your project root folder and register the icons preset:

ts
// uno.config.ts
import { defineConfig, presetAttributify, presetIcons } from 'unocss';
import YouCanIconsInfo from '@youcan/ui-icons/info.json';
import YouCanIcons from '@youcan/ui-icons/icons.json';

export default defineConfig({
  presets: [
    presetAttributify(),
    presetIcons({
      warn: true,
      extraProperties: {
        width: '20px',
        height: '20px',
        display: 'block',
      },
      collections: {
        [YouCanIconsInfo.prefix || 'youcan']: () => YouCanIcons,
      },
    }),
  ],
});

Safelisting Icon Classes ​

To ensure that all necessary icon classes are retained and not removed during build processes, add them to the safelist array in the UnoCSS configuration file unocss.config.ts. This prevents purging of these classes, ensuring they remain available for use in your application.

ts
// uno.config.ts
import { defineConfig, presetAttributify, presetIcons } from 'unocss';
import YouCanIconsInfo from '@youcan/ui-icons/info.json';
import YouCanIcons from '@youcan/ui-icons/icons.json';

export default defineConfig({
  presets: [
    presetAttributify(),
    presetIcons({
      warn: true,
      extraProperties: {
        width: '20px',
        height: '20px',
        display: 'block',
      },
      collections: {
        [YouCanIconsInfo.prefix || 'youcan']: () => YouCanIcons,
      },
    }),
  ],
  safelist: [
    ...Object.keys(YouCanIcons.icons).map(key => `i-${YouCanIcons.prefix}:${key}`),
  ],
});

© 2022-2024 YouCan