📦 Installation

Install the package using your preferred package manager:

npm install symbolic-icons

yarn add symbolic-icons

pnpm add symbolic-icons

bun add symbolic-icons

🚀 Usage

Basic Usage

Import and use icons directly in your Vue 3 components:

<script setup lang="ts">
import { AlarmSymbolic, FolderSymbolic, StarredSymbolic } from 'symbolic-icons'
</script>

<template>
  <div>
    <AlarmSymbolic :size="32" />
    <FolderSymbolic :size="48" color="#1a73e8" />
    <StarredSymbolic :size="24" :opacity="0.8" />
  </div>
</template>

Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 16 | Icon size in pixels | | color | string | currentColor | Icon color (any valid CSS color) | | opacity | number | 1 | Icon opacity (0 to 1) |

TypeScript Support

Full TypeScript support with type definitions included:

import type { SymbolicIconsProps } from 'symbolic-icons'
import { AlarmSymbolic } from 'symbolic-icons'

const iconProps: SymbolicIconsProps = {
  size: 32,
  color: '#000000',
  opacity: 1
}

✨ Features

• 🎨 386+ icons - Complete GNOME symbolic icon set
• 🔧 Vue 3 native - Built specifically for Vue 3 with Composition API
• 📘 TypeScript - Full type definitions included
• 🎯 Tree-shakeable - Only import what you need
• 🎨 Customizable - Size, color, and opacity props
• ⚡ Lightweight - Optimized SVG output
• 🔍 Searchable - Interactive gallery to find icons

🎨 Icon Gallery

Browse all available icons in the interactive gallery:

🔗 View Icon Gallery

Or run the gallery locally:

git clone https://github.com/Cleboost/symbolic-icons.git
cd symbolic-icons
bun install
bun run build
cd gallery
bun install
bun run dev

📚 Icon Categories

Icons are organized into categories:

• Actions - Common UI actions (copy, paste, delete, etc.)
• Apps - Application icons
• Devices - Hardware and device icons
• Emblems - Status and badge icons
• Faces - Emoji-style face icons
• Folders - File system icons
• Network - Connectivity and network icons
• Status - System status indicators
• Weather - Weather condition icons

🛠️ Development

Prerequisites

• Bun (recommended) or Node.js 18+
• Vue 3.3+

Setup

# Clone the repository
git clone https://github.com/Cleboost/symbolic-icons.git
cd symbolic-icons

# Install dependencies
bun install

# Download latest GNOME icons
bun run download

# Generate Vue components
bun run generate

# Build the package
bun run build

Scripts

| Command | Description | |---------|-------------| | bun run download | Download latest GNOME symbolic icons | | bun run generate | Generate Vue components from SVG files | | bun run build | Build the package for distribution | | bun run clean | Clean generated files | | bun run typecheck | Run TypeScript type checking | | bun run lint | Lint the codebase |

📄 License

This project is licensed under the MIT License.

The GNOME icons are licensed under the CC BY-SA 3.0 license.

🙏 Credits

• Icons by GNOME Project
• Vue 3 wrapper by Cleboost