https://github.com/affinitic/volto-icon-selector-widget

https://github.com/affinitic/volto-icon-selector-widget

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/affinitic/volto-icon-selector-widget
• Owner: affinitic
• License: mit
• Created: 2023-02-23T11:26:27.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-28T09:34:03.000Z (5 months ago)
• Last Synced: 2024-08-28T10:56:24.910Z (5 months ago)
• Language: JavaScript
• Size: 909 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-volto - volto-icon-selector-widget - A widget to search and select an icon from a list, by default it use awesome font icon implementation in semantic ui, but it can be customized. (Addons / Widgets)

README

        
# volto-icon-selector-widget

## Feature

This widget is used to select visualy from a list of icon with a popup and a search field. The icon list is base on Font Awesome 6.4.0

### Settings

You can configure the icon list and default search result renderer (ResultRenderer, CategoryRenderer and CategoryLayoutRenderer) in `config.settings.widget.icon_selector.iconList` and `config.settings.widget.icon_selector.defaultRenderer`

#### Icon list structure

```

{

  [category id] : {

    'title': [category title]

    'list': [

      {'name' : [name of the icon]},

      ...

    ]

  },

  ...

}

```

## Getting started

### Add volto-block-style to your Volto project

1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone

1. Start Volto frontend

- If you already have a volto project, just update `package.json`:

  ```JSON

  "addons": [

      "@affinitic/volto-icon-selector-widget"

  ],

  "dependencies": {

      "@affinitic/volto-icon-selector-widget": "^0.0.0"

  }

  ```

- If not, create one:

  ```

  npm install -g yo @plone/generator-volto

  yo @plone/volto my-volto-project --addon @affinitic/volto-icon-selector-widget

  cd my-volto-project

  ```

1. Install new add-ons and restart Volto:

   ```

   yarn

   yarn start

   ```

1. Go to http://localhost:3000

1. Happy editing!