grapesjs-icon-set 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +89 -0
- package/package.json +2 -2
package/Readme.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
|
|
2
|
+
# grapesjs-icon-set
|
|
3
|
+
|
|
4
|
+
A massive, high-performance icon library for **GrapesJS** featuring over 10,000+ SVG icons. This package includes multiple style variants (Round, Sharp, Two-Tone, etc.) organized for easy integration into the GrapesJS Block Manager and Asset Manager.
|
|
5
|
+
|
|
6
|
+
## Key Features
|
|
7
|
+
|
|
8
|
+
* **10,000+ Icons**: A complete set of professional icons.
|
|
9
|
+
* **Variant Support**: Access `round`, `sharp`, `twotone`, and `outlined` styles.
|
|
10
|
+
* **Tree-Shakeable**: Import only the icons you need to keep your bundle small.
|
|
11
|
+
* **GrapesJS Optimized**: Ready-to-use snippets for custom blocks and assets.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
Install the package into your project using npm:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install grapesjs-icon-set
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 🛠 Usage
|
|
27
|
+
|
|
28
|
+
### 1. Basic Import
|
|
29
|
+
|
|
30
|
+
Import the icon set into your GrapesJS configuration file:
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
import grapesjs from 'grapesjs';
|
|
34
|
+
import { icons } from 'grapesjs-icon-set';
|
|
35
|
+
|
|
36
|
+
const editor = grapesjs.init({
|
|
37
|
+
container: '#gjs',
|
|
38
|
+
// ... rest of your config
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 2. Adding Icons to the Block Manager
|
|
44
|
+
|
|
45
|
+
To let users drag icons into their canvas, add them as blocks:
|
|
46
|
+
|
|
47
|
+
```javascript
|
|
48
|
+
editor.Blocks.add('icon-zoom-out', {
|
|
49
|
+
label: 'Zoom Out',
|
|
50
|
+
media: icons.zoom_out.round, // Use the SVG string from the package
|
|
51
|
+
content: {
|
|
52
|
+
type: 'svg',
|
|
53
|
+
content: icons.zoom_out.round,
|
|
54
|
+
attributes: { style: 'width: 50px; height: 50px;' }
|
|
55
|
+
},
|
|
56
|
+
category: 'Icons',
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 3. Integrating with Asset Manager
|
|
62
|
+
|
|
63
|
+
If you want to provide these as selectable images for users:
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
const am = editor.AssetManager;
|
|
67
|
+
|
|
68
|
+
am.add([
|
|
69
|
+
{ src: 'node_modules/grapesjs-icon-set/src/svg/home/round.svg', name: 'Home' },
|
|
70
|
+
{ src: 'node_modules/grapesjs-icon-set/src/svg/zoom_out/sharp.svg', name: 'Zoom Out' }
|
|
71
|
+
]);
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## 📁 Directory Structure
|
|
78
|
+
|
|
79
|
+
Your installation includes the following organized paths:
|
|
80
|
+
|
|
81
|
+
* `dist/`: Optimized production builds (`index.js`, `index.esm.js`).
|
|
82
|
+
* `src/svg/`: Raw SVG source files categorized by name and style.
|
|
83
|
+
* `icons.json`: A manifest file for programmatically looping through the set.
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## 📄 License
|
|
88
|
+
|
|
89
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "grapesjs-icon-set",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Custom SVG icon set plugin for GrapesJS",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
20
|
-
|
|
20
|
+
"build": "rollup -c"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@rollup/plugin-node-resolve": "^16.0.3",
|