@shifl-inc/kontainer-icon-library

Icon Library

Icon library for Shifl Inc. with Vue 3 and Vuetify integration.

📦 Installation

Install from npm:

npm install @shifl-inc/kontainer-icon-library

Or add to package.json:

{
  "dependencies": {
    "@shifl-inc/kontainer-icon-library": "^3.0.0"
  }
}

🚀 Usage

Basic Usage

<template>
  <div>
    <IcSetting />
    <IcNotification :size="32" />
    <IcArrowDown :size="20" color="#FF5733" />
  </div>
</template>

<script>
import { IcSetting, IcNotification, IcArrowDown } from "@shifl-inc/kontainer-icon-library";

export default {
  components: {
    IcSetting,
    IcNotification,
    IcArrowDown,
  },
};
</script>

Props

All icon components accept these props:

Size Options

<IcSetting :size="16" />
<!-- 16px -->
<IcSetting :size="20" />
<!-- 20px -->
<IcSetting :size="24" />
<!-- 24px (default) -->
<IcSetting :size="32" />
<!-- 32px -->
<IcSetting :size="48" />
<!-- 48px -->

Color Options

<!-- Hex color -->
<IcNotification color="#FF5733" />

<!-- CSS variable -->
<IcNotification color="var(--my-color)" />

<!-- Vuetify color names -->
<IcNotification color="primary" />
<IcNotification color="error" />
<IcNotification color="success" />

Tree-Shaking

Only import the icons you need - unused icons won't be included in your bundle:

// ✅ Good - only imports what you use
import { IcSetting, IcNotification } from "@shifl-inc/kontainer-icon-library";

// ❌ Avoid - imports everything
import * as Icons from "@shifl-inc/kontainer-icon-library";

🎨 Available Icons

Browse all available icons, search, and copy/download SVG or PNG at:

https://shifl-icons.netlify.app/

To run the icon library site locally instead:

cd site
npm install
npm run dev

🔧 Development

Prerequisites

• Node.js 16+
• npm

Setup

# Install dependencies
npm install

# Build library
npm run build

Adding New Icons

1. Export icons from Figma as SVG (follow naming: ic-[name].svg)
2. Place SVG files in src/icons/ folder
3. Export metadata (name + keywords) from the Figma plugin and update site/data/icons-metadata.json — see PUBLISHING_GUIDE.md
4. Run: npm run process-icons
5. Icons are automatically generated!

See FIGMA_EXPORT_GUIDE.md for detailed export instructions and PUBLISHING_GUIDE.md for the full metadata + release workflow.

📚 Scripts

npm run build                  # Build library for production
npm run optimize-svgs          # Optimize SVG files
npm run generate-icons         # Generate Vue components from SVGs
npm run generate-icon-manifest # Rebuild site/data/icons.generated.json from src/icons/ + icons-metadata.json
npm run process-icons          # Optimize + Generate + rebuild site manifest (all-in-one)

📝 License

ISC

👥 Maintainers

Md Shamsuddin[shams@shifl.com] Shifl Inc.