Removify-icons NPM

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

Curated Selection: A handpicked array of icons designed to meet the specific needs of our projects, ensuring relevance and coherence in design.
Optimized for Performance: Each icon is optimized for fast loading and minimal impact on performance, ensuring a smooth user experience.
Ease of Integration: With straightforward integration steps, these icons can seamlessly become a part of any project, complementing our existing design frameworks.
Customization-Friendly: While they're ready to use, these icons can also be easily customized in terms of size, color, and style to fit the unique requirements of different projects.
Internal Collaboration: Encourages team collaboration, with options for members to suggest or add new icons as per project demands.

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:

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

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:

// vite.config.ts
import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite';
import { collectionKeys, customCollections } from 'removify-icons';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/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>

Volar

To make Volar know the components, you need to add the following code to vite.config.js:

import removifyIcons from 'removify-icons/vite';

export default defineConfig({
  plugins: [
    ...otherPlugins,
    removifyIcons(),
  ],
});

with this jsconfig.json or tsconfig.json option.

{
  "include": ["src/**/*.vue", "**/*.d.ts"]
}

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

Get the list of icons

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

import icons from 'removify-icons/json';

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

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.