grapesjs-icons
v0.0.4
Published
GrapesJS icons plugin with Iconify
Downloads
78
Maintainers
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 usegrapesjs-icons
plugin, please donate to Iconify to guarantee free use of the API.
Demo
Installation
npm install grapesjs-icons
pnpm add grapesjs-icons
yarn add grapesjs-icons
Usage
JavaScript
import grapesjs from 'grapesjs'
import grapesjsIcons from 'grapesjs-icons'
const options = {
// 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]: options
}
// ...
})
TypeScript
import grapesjs, { usePlugin } from 'grapesjs'
import grapesjsIcons from 'grapesjs-icons'
import type { PluginOptions } from 'grapesjs-icons'
const options: 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, options)
]
// ...
})
How do I find and use an Iconify collection?
- Search for an icon collection on the Iconify website.
- Click on a collection (a.k.a "set" on Iconify website) or an icon.
- Copy the shortcut name of the collection in the URL. Examples:
- Remix collection:
https://icon-sets.iconify.design/ri/
-> Copyri
- Remix icon:
https://icon-sets.iconify.design/ri/add-fill/
-> Copyri
- Remix collection:
- 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 theopen-icons-modal
command, choose an icon and drop it by clicking somewhere in the GrapesJS canvas. Do you want contribute?
editor.runCommand('open-icons-modal')
Options
{
// 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 tab in GitHub is the place to be.
However, if you get an error, you should open an issue.
License
Distributed under the BSD 3-Clause License. See LICENSE for more information.
Contact
Benjamin Grand @bgrand_ch