npm package: @removify/icons
Description: Removify Custom Icons
Author: Removify
Latest version: 0.4.5

# 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](./playground).

### Installation

This library is built on top of [iconify](https://iconify.design/) and [unplugin-icons](https://github.com/unplugin/unplugin-icons), also [vite](https://vitejs.dev/) is recommended. To install, run the following command:

```bash
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:

```ts
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:

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

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

### Auto Import

Reference to [unplugin-icons](https://github.com/unplugin/unplugin-icons#auto-importing).

Vue example:

```ts
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:

```vue
<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`:

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

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

### Tailwind CSS

We also provide a collection to work with [tailwind icons plugin](https://www.npmjs.com/package/@egoist/tailwindcss-icons).

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

```bash
pnpm add -D @egoist/tailwindcss-icons
```

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

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