@raynaui-icons/core

Framework-agnostic SVG icons from Rayna UI design kit with React and Vue component names.

Installation

npm install @raynaui-icons/core

Usage

Import all icons

// CommonJS
const { light, solid } = require('@raynaui-icons/core');

// ESM
import { light, solid } from '@raynaui-icons/core'

Import specific style

// CommonJS
const lightIcons = require('@raynaui-icons/core/light');
const solidIcons = require('@raynaui-icons/core/solid');

// ESM
import lightIcons from '@raynaui-icons/core/light';
import solidIcons from '@raynaui-icons/core/solid';

Access individual icons

Each icon object contains:

• name: Original filename (e.g., "home", "user")
• svg: SVG markup string
• reactName: React component name (e.g., "HomeIcon", "UserIcon")
• vueName: Vue component name (e.g., "HomeIcon", "UserIcon")

// Access icon object
const homeIcon = lightIcons.home;
console.log(homeIcon.name);        // "home"
console.log(homeIcon.svg);          // "<svg>...</svg>"
console.log(homeIcon.reactName);    // "HomeIcon"
console.log(homeIcon.vueName);      // "HomeIcon"

// Or access properties directly
const homeSvg = lightIcons.home.svg;
const homeReactName = lightIcons.home.reactName;

Use with Strapi

This package is perfect for use with Strapi and strapi-plugin-icons-field:

// In your Strapi configuration
import { light, solid } from '@raynaui-icons/core';

// Pass icon list to strapi-plugin-icons-field
const iconList = Object.values(light).map(icon => ({
  name: icon.name,
  svg: icon.svg,
  reactName: icon.reactName,  // For React frontend
  vueName: icon.vueName       // For Vue frontend
}));

// Strapi can now return the appropriate component name
// based on your frontend framework

Icon naming convention

• Original names: kebab-case (e.g., "home", "user-add", "arrow-down")
• React names: PascalCase + "Icon" (e.g., "HomeIcon", "UserAddIcon", "ArrowDownIcon")
• Vue names: PascalCase + "Icon" (e.g., "HomeIcon", "UserAddIcon", "ArrowDownIcon")

Examples

Basic usage

import { light } from '@raynaui-icons/core';

// Display icon in HTML
document.body.innerHTML = light.home.svg;

// Get component names for different frameworks
console.log(light.home.reactName);  // "HomeIcon"
console.log(light.home.vueName);    // "HomeIcon"

Framework-specific integration

// For React projects
import { light } from '@raynaui-icons/core';
const iconName = light.home.reactName; // "HomeIcon"

// For Vue projects
import { light } from '@raynaui-icons/core';
const iconName = light.home.vueName;   // "HomeIcon"

// For vanilla JS/HTML
import { light } from '@raynaui-icons/core';
const iconSvg = light.home.svg;        // "<svg>...</svg>"

Available icon styles

• light: Outline-style icons
• solid: Filled-style icons

License

MIT