https://github.com/bgrand-ch/grapesjs-icons
GrapesJS icons plugin with Iconify
https://github.com/bgrand-ch/grapesjs-icons
gjs grapesjs icon iconify icons plugin svg
Last synced: 5 months ago
JSON representation
GrapesJS icons plugin with Iconify
- Host: GitHub
- URL: https://github.com/bgrand-ch/grapesjs-icons
- Owner: bgrand-ch
- License: bsd-3-clause
- Created: 2023-07-26T23:08:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-30T04:29:50.000Z (6 months ago)
- Last Synced: 2025-05-04T01:02:28.097Z (5 months ago)
- Topics: gjs, grapesjs, icon, iconify, icons, plugin, svg
- Language: TypeScript
- Homepage:
- Size: 1.33 MB
- Stars: 14
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# GrapesJS icons plugin with Iconify
> `grapesjs-icons` plugin is not an official Iconify plugin and is not maintained by the Iconify team. This plugin uses the Iconify API. This API is the biggest expense of the Iconify team. If you use `grapesjs-icons` plugin, please [donate to Iconify](https://iconify.design/sponsors/) to guarantee free use of the API.
## Demo
## Installation
```shell
npm install grapesjs grapesjs-icons iconify-icon
```
## Usage
### JavaScript
```js
import grapesjs from 'grapesjs'
import grapesjsIcons from 'grapesjs-icons'
const pluginOptions = {
// see https://icon-sets.iconify.design/
collections: [
'ri', // Remix Icon by Remix Design
'mdi', // Material Design Icons by Pictogrammers
'uim', // Unicons Monochrome by Iconscout
'streamline-emojis' // Streamline Emojis by Streamline
]
}
const editor = grapesjs.init({
// ...
plugins: [
grapesjsIcons
],
pluginOpts: {
[grapesjsIcons]: pluginOptions
}
// ...
})
```
### TypeScript
```ts
import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsIcons from 'grapesjs-icons'
const pluginOptions = {
// see https://icon-sets.iconify.design/
collections: [
'ri', // Remix Icon by Remix Design,
'mdi', // Material Design Icons by Pictogrammers
'uim', // Unicons Monochrome by Iconscout
'streamline-emojis' // Streamline Emojis by Streamline
]
}
const editor = grapesjs.init({
// ...
plugins: [
usePlugin(grapesjsIcons, pluginOptions)
]
// ...
})
```
## How do I find and use an Iconify collection?
1. Search for an icon collection on the [Iconify website](https://icon-sets.iconify.design/).
2. Click on a collection (a.k.a "set" on [Iconify website](https://icon-sets.iconify.design/)) or an icon.
3. Copy the shortcut name of the collection in the URL. Examples:
- *Remix* collection: `https://icon-sets.iconify.design/ri/` -> Copy `ri`
- *Remix* icon: `https://icon-sets.iconify.design/ri/add-fill/` -> Copy `ri`
4. Paste the shortcut name of the collection in the `collections` option of the plugin.
## Command
> `click` insertion mode is not yet implemented. The idea is to open the icons modal from anywhere using the `open-icons-modal` command, choose an icon and drop it by clicking somewhere in the GrapesJS canvas. Do you want contribute?
```ts
editor.runCommand('open-icons-modal')
```
## Options
```ts
{
// required, list of collection shortcut names
collections: string[],
// optional
modal: {
title: string,
collectionText: string,
categoryText: string,
searchText: string
},
component: {
type: string,
name: string
},
block: {
category: string
}
}
```
## Question? Idea?
If you have a question about how `grapesjs-icons` works or an idea to improve it, the [Discussions](https://github.com/bgrand-ch/grapesjs-icons/discussions) tab in GitHub is the place to be.
However, if you get an error, you should open an [issue](https://github.com/bgrand-ch/grapesjs-icons/issues).
## License
Distributed under the BSD 3-Clause License. See [LICENSE](https://github.com/bgrand-ch/grapesjs-icons/blob/main/LICENSE.md) for more information.
## Contact
Benjamin Grand [@bgrand_ch](https://twitter.com/bgrand_ch)