Removify-icons

Welcome to Removify-Icons, our in-house icon library tailored for enhancing the user interfaces of our internal projects. This collection is an embodiment of our commitment to consistency, efficiency, and aesthetic appeal in all our digital products.

Key Features

• Use icon with unplugin-icons and unplugin-vue-components.

• Language server auto completion support with Volar.

• Support with tailwind icon plugin.

Usage Guidelines

To see a working example, check removify-icons-example.

Installation

This library is built on top of iconify and unplugin-icons, also vite is recommended. To install, run the following command:

npm install -D unplugin-icons @removify/icons
# or
yarn add -D unplugin-icons @removify/icons
# or
pnpm add -D unplugin-icons @removify/icons

Usage

To use with vite:

import { customCollections } from '@removify/icons';
import Icons from 'unplugin-icons/vite';
// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  ...otherConfig,
  plugins: [
    Icons({
      customCollections: {
        ...customCollections,
      },
    }),
  ],
});

Then you can import the icons in your project:

import ArrowLeft from '~icons/rmv-arrows/angle-left';

<ArrowLeft style="color: red; height: 20px; width: 20px;" />;

Auto Import

Reference to unplugin-icons.

Vue example:

import { collectionKeys, customCollections } from '@removify/icons';
import IconsResolver from 'unplugin-icons/resolver';
import Icons from 'unplugin-icons/vite';
import Components from 'unplugin-vue-components/vite';
// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue3',
      customCollections: {
        ...customCollections,
      },
    }),
    Components({
      resolvers: [
        IconsResolver({
          customCollections: [...collectionKeys],
        }),
      ],
    }),
  ],
});

To use that you can simply use:

<i-rmv-arrows-angle-left style="color: red; width: 3rem; height: 3rem">
</i-rmv-arrows-angle-left>

LSP support

To make your LSP knowns the components, you need to add the following code to your {t,j}sconfig.json:

{
  "compilerOptions": {
    "types": [
      "@removify/icons/components",
      "@removify/icons/imports"
    ]
  }
}

• You don't need to include unplugin-icons/types/vue, it's already included in @removify/icons/imports, but if you think it's slow down your auto completion, you change replace it with unplugin-icons/types/vue.

In this way, you can have all the hints and auto-completion from your LSP.

[!CAUTION] ⚠️ You should NOT remove the unplugin-vue-components plugin, our plugin is only for the LSP to know the components. But to make the components work, you still need unplugin-vue-components.

Get the list of icons

To get the list of icons, you can import the data from:

import icons from '@removify/icons/json';

Tailwind CSS

We also provide a collection to work with tailwind icons plugin.

You have to make sure you have tailwind setup and the plugin installed:

pnpm add -D @egoist/tailwindcss-icons

To configure the plugin, you can add the following code to tailwind.config.ts:

import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
import collections from '@removify/icons/iconify';

export default {
  ...resetConfig,
  plugins: [
    iconsPlugin({
      collections: {
        ...collections,
        // Can add more if needed
        ...getIconCollections(['heroicons']),
      },
    }),
  ],
} satisfies Config;

Future work

[!NOTE] 🚧 A website to show all icons is planned, but not yet implemented, stay tuned! As unplugin-icons does not support dynamic import, would be little bit tricky to implement. The finally silly solution would to generate a file with all icons.

[!NOTE] 🚧 To export all components, rather than reply on unplugin-vue-components to auto import Such that use import { Alert } from 'removify-icons' to import all icons.