Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (open-icon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Open Icon

A comprehensive, tree-shakable icon library with Vue 3 support.

Features

🌳 Tree-shakable: Only bundle the icons you use
🎯 TypeScript Support: Full type safety
🚀 Vue 3 Integration: First-class Vue support with composables and plugins
📦 Multiple Formats: ESM, CommonJS, and IIFE builds
🎨 Customizable: CSS variables for colors and sizes
📱 Scalable: Vector-based SVG icons

Installation

npm install open-icon
# or
pnpm add open-icon
# or
yarn add open-icon

Quick Start

Basic Usage (Legacy)

import { getIcon, Icons } from 'open-icon';

// This imports ALL icons (not recommended)
const iconSvg = await getIcon(Icons.ADD_M);

Tree-Shakable Usage (Recommended)

// Import only what you need
import { IconAddM, IconSearchM } from 'open-icon/icons';

// Use directly
const addIcon = IconAddM;

Vue 3 Integration

// main.ts
import { createApp } from 'vue';
import { IconRegistryPlugin } from 'open-icon/vue';
import { IconAddM, IconSearchM, IconHeartM } from 'open-icon/icons';

const app = createApp(App);

app.use(IconRegistryPlugin, {
  icons: {
    'add-m': IconAddM,
    'search-m': IconSearchM,
    'heart-m': IconHeartM,
  },
  aliases: {
    'plus': 'add-m',
    'search': 'search-m',
    'heart': 'heart-m',
  }
});

<!-- Icon.vue -->
<template>
  <div class="icon" v-html="iconContent" />
</template>

<script setup>
import { computed } from 'vue';
import { useIconRegistry } from 'open-icon/vue';

const props = defineProps({
  name: String,
});

const { getIcon } = useIconRegistry();
const iconContent = computed(() => getIcon(props.name));
</script>

Documentation

Vue Integration Guide - Comprehensive Vue 3 setup and usage
Tree-Shaking Guide - How to optimize bundle size
Migration Guide - Migrating to tree-shakable approach
API Documentation - Complete API reference

Available Icons

The library includes 900+ icons. View all available icons:

import { Icons } from 'open-icon';
console.log(Object.values(Icons));

Styling

Icons use currentColor by default and scale with font-size:

.icon {
  color: blue;
  font-size: 24px;
}

CSS Variables

:root {
  --icon-stroke-width: 5;
  --icon-stroke-color: currentColor;
  --icon-fill: transparent;
}

JSPM

open-icon