@moreyears/icons

Official icon library for More Years. Available as React components and Web Components.

Installation

npm install @moreyears/icons

React Usage

import { Icon } from '@moreyears/icons';

// Basic usage
<Icon name="mailbox" />

// With weight and customisation
<Icon name="mailbox" weight="bold" size={32} color="#333" />

// For linear/outline weights, you can adjust stroke width
<Icon name="mailbox" weight="linear" strokeWidth={1.5} />

Available Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | — | Icon name (slug, display name, or full id) | | weight | string | "linear" | Icon weight variant | | size | number \| string | 24 | Icon size in pixels | | color | string | "currentColor" | Icon color | | strokeWidth | number \| string | — | Stroke width (for linear/outline weights) | | className | string | — | Additional CSS class |

Available Weights

• broken
• line-duotone
• linear (default)
• outline
• bold
• bold-duotone

Helper Functions

import { getIconSvg, getIconInfo, getAllIcons, getIconsByCategory, getCategories } from '@moreyears/icons';

// Get raw SVG string
const svg = getIconSvg('mailbox', 'bold');

// Get icon metadata
const info = getIconInfo('mailbox');
// → { name: "Mailbox", slug: "mailbox", category: "messages-conversation", weights: [...] }

// List all icons
const icons = getAllIcons();

// List icons by category
const messageIcons = getIconsByCategory('messages-conversation');

// List all categories
const categories = getCategories();

CDN / Web Component Usage

For non-React projects, use the Web Component via CDN:

<!-- Load from CDN -->
<script src="https://cdn.jsdelivr.net/npm/@moreyears/icons/dist/web-component.js"></script>

<!-- Use anywhere in your HTML -->
<moreyears-icon name="mailbox" weight="bold" size="24" color="#333"></moreyears-icon>

<!-- With stroke width for linear icons -->
<moreyears-icon name="mailbox" weight="linear" stroke-width="1.5"></moreyears-icon>

Web Component Attributes

| Attribute | Default | Description | |-----------|---------|-------------| | name | — | Icon name | | weight | "linear" | Icon weight | | size | "24" | Size in pixels | | color | "currentColor" | Icon color | | stroke-width | — | Stroke width |

Direct SVG Access

You can also import SVGs directly:

// Import a specific SVG file
import mailboxBold from '@moreyears/icons/svgs/bold/messages-conversation/mailbox.svg';

Or access the manifest for building custom tooling:

import manifest from '@moreyears/icons/manifest';

Manifest Structure

The manifest provides full metadata for every icon:

{
  "icons": {
    "messages-conversation/mailbox": {
      "name": "Mailbox",
      "slug": "mailbox",
      "category": "messages-conversation",
      "categoryName": "Messages, Conversation",
      "weights": [
        { "weight": "Bold", "weightSlug": "bold", "path": "svgs/bold/messages-conversation/mailbox.svg" }
      ]
    }
  },
  "categories": {
    "messages-conversation": {
      "name": "Messages, Conversation",
      "slug": "messages-conversation",
      "icons": ["mailbox", "chat-square", ...]
    }
  }
}

Building from Source

# Install dependencies
npm install

# Build the package
npm run build

The build script generates:

• dist/index.mjs — React component (ESM)
• dist/index.js — React component (CJS)
• dist/web-component.mjs — Web Component (ESM)
• dist/web-component.js — Web Component (IIFE, for CDN)
• dist/index.d.ts — TypeScript definitions
• dist/manifest.json — Icon manifest