@0x30-ch/iconify-field

Strapi Iconify Field Plugin

A powerful Strapi 5 plugin that provides a custom iconify selection field with configurable icon libraries and advanced search capabilities.

✨ Features

• 🎨 Rich Icon Selection: Browse and search through thousands of icons from popular icon libraries
• ⚙️ Configurable Icon Sets: Enable/disable specific icon libraries in plugin settings
• 🔍 Smart Search: Intelligent search functionality across enabled icon sets only
• 📊 Admin Settings: Easy configuration through Strapi admin panel

🚀 Installation

npm install @0x30-ch/iconify-field
# or
yarn add @0x30-ch/iconify-field
# or
pnpm add @0x30-ch/iconify-field

🔧 Configuration

1. Configure Icon Sets

Navigate to Settings > Iconify Field in your Strapi admin panel to configure:

• Enabled Icon Sets: Choose which icon libraries to make available

2. Add to Content Types

Add the iconify field to your content types

📖 Usage

Basic Usage

Once configured, the iconify field appears as a searchable icon picker in your content type forms:

1. Click the field to open the icon selection modal
2. Browse popular icons or use the search functionality
3. Select an icon to save it to your content

Programmatic Access

Access icon data in your code:

// Example API response
{
  "data": {
    "id": 1,
    "icon": {"icon":"lucide:door-closed","set":"lucide","name":"door-closed"}, // Icon identifier
    "title": "Homepage",
    // ... other fields
  }
}

Frontend Integration

Use the icon data in your frontend:

// React example
import { Icon } from '@iconify/react';

function MyComponent({ iconData }) {
  return (
    <div>
      <Icon icon={iconData.icon.icon} width="24" height="24" />
      <span>{iconData.title}</span>
    </div>
  );
}

<!-- Vue example -->
<template>
  <div>
    <Icon :icon="iconData.icon.icon" width="24" height="24" />
    <span>{{ iconData.title }}</span>
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

🏗️ Development

Prerequisites

• Node.js >= 18.0.0
• Strapi 5.x
• TypeScript support

Setup

# Clone and install dependencies
git clone <repository-url>
cd strapi-iconify-field
pnpm install

# Start development
pnpm dev

# Build plugin
pnpm build

# Type checking
pnpm test:ts:front  # Frontend types
pnpm test:ts:back   # Backend types

Project Structure

packages/iconify-field/
├── admin/                 # Frontend React components
│   ├── src/
│   │   ├── components/    # UI components
│   │   ├── pages/         # Admin pages (Settings)
│   │   ├── translations/  # i18n files
│   │   ├── utils/         # Utilities
│   │   └── index.ts       # Plugin entry point
│   └── tsconfig.json
├── server/                # Backend logic
│   ├── src/
│   │   ├── controllers/   # API controllers
│   │   ├── services/      # Business logic
│   │   ├── routes/        # Route definitions
│   │   ├── config/        # Plugin config
│   │   └── index.ts       # Server entry point
│   └── tsconfig.json
├── package.json
└── README.md

🔌 API Reference

Endpoints

• GET /iconify-field/icon-sets - Get available icon sets
• GET /iconify-field/icons - Get icons with pagination
• GET /iconify-field/icons/search - Search icons
• GET /iconify-field/icons/:setId/popular - Get popular icons for a set
• GET /iconify-field/icons/:iconId - Get specific icon data
• POST /iconify-field/icons/validate - Validate icon existence

Settings API

• GET /iconify-field/settings - Get plugin settings
• PUT /iconify-field/settings - Update plugin settings
• GET /iconify-field/settings/enabled-sets - Get enabled icon sets

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Strapi Design System v2 components
• Write comprehensive tests
• Follow existing code patterns
• Update documentation

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Iconify - For the amazing icon ecosystem
• Strapi - For the excellent CMS framework
• 0x30 - Original plugin author
• All icon library contributors

📞 Support

• 📋 Issues
• 📖 Documentation
• 💬 Community

---

Made with ❤️ for the Strapi community