https://github.com/innovixx/payload-icon-picker-field

https://github.com/innovixx/payload-icon-picker-field

payload-field payload-plugin

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/innovixx/payload-icon-picker-field
• Owner: innovixx
• License: mit
• Created: 2023-11-17T19:49:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-01-22T19:35:50.000Z (over 1 year ago)
• Last Synced: 2025-02-20T18:01:49.548Z (over 1 year ago)
• Topics: payload-field, payload-plugin
• Language: TypeScript
• Homepage:
• Size: 584 KB
• Stars: 29
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Payload Icon Picker Field

[![NPM](https://img.shields.io/npm/v/@innovixx/payload-icon-picker-field)](https://www.npmjs.com/package/@innovixx/payload-icon-picker-field)

A field for [Payload](https://github.com/payloadcms/payload) which implements a robust icon picker which can be used with react-icons or custom svg icons.

![payload-icon-picker-field-screenshot.png](https://github.com/Innovixx-Development/payload-icon-picker-field/blob/master/screenshots/payload-icon-picker-field-screenshot.png?raw=true)

Core features:

  - {{core features list}}

## Installation

```bash

  yarn add @innovixx/payload-icon-picker-field

  # OR

  npm i @innovixx/payload-icon-picker-field

```

## Basic Usage

```js

import * as fa6Icons from 'react-icons/fa6'

import iconPickerField from '@innovixx/payload-icon-picker-field'

import type { CollectionConfig } from 'payload/types'

const Pages: CollectionConfig = {

  slug: 'pages',

  admin: {

    useAsTitle: 'title',

  },

  fields: [

    {

      name: 'title',

      type: 'text',

      required: true,

    },

    iconPickerField({

      name: 'customIcons',

      label: 'Custom Icons',

      icons: {

        house: ' ({

         ...config,

         resolve: {

           ...config.resolve,

           alias: {

             ...config.resolve.alias,

             react: path.join(__dirname, "../node_modules/react"),

             "react-dom": path.join(__dirname, "../node_modules/react-dom"),

             payload: path.join(__dirname, "../node_modules/payload"),

             "@innovixx/payload-icon-picker-field": path.join(

               __dirname,

               "../../payload/payload-plugin-boilerplate/src"

             ),

           },

         },

       }),

     },

   });

   ```