YouCan

Appearance

Icons Installation ​

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

Install the Icons ​

bash
npm install @youcan/ui-icons

Install UnoCSS ​

We use unocss as the engine that provides our icons to our users. Therefore, to be able to the icons you must first install unocss in your project:

bash
  npm install unocss

Include UnoCSS ​

Include UnoCSS in the top level of your application:

bash
  import 'uno.css';

Configure UnoCSS ​

Create a uno.config.ts file in the top level of your application

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
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