Skip to content

Commit 800385c

Browse files
authored
docs: document using custom SVG icons without a gulp build step (#794)
customize.md only described the src/icons -> gulp build-icons -> gulp css icon-font pipeline, which is meant for icons bundled into this package's own build/fork. It never mentioned that the icon option already supports plain CSS classes or a function injecting inline SVG, so users following the docs hit an unnecessary build/fork requirement for something already possible. Fixes #762
1 parent b10fcc2 commit 800385c

1 file changed

Lines changed: 24 additions & 0 deletions

File tree

documentation/docs/customize.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,30 @@ Font-Awesome icons used from [encharm/Font-Awesome-SVG-PNG](https://github.com/e
2525

2626
Finally, you will need to re-build the CSS using [`sass`](http://sass-lang.com), otherwise you may see mismatchings between the icon references. Use the command ``gulp css`` to re-build the CSS in the dist directory. The new CSS files will contain the icons you added.
2727

28+
### Using your own SVG icons without a build step
29+
30+
The `gulp build-icons` pipeline above compiles the SVGs in `src/icons` into an icon font, which is meant for icons you want bundled into this package's own build. If you just want to use your own SVG icons in your project, you don't need to fork or build anything, since the [icon option](items#icon) already supports both of the following, plain CSS approaches:
31+
32+
```javascript
33+
var items = {
34+
firstCommand: {
35+
name: "Paste",
36+
// context-menu-icon-checkmark must be defined in your own CSS, e.g.
37+
// .context-menu-icon-checkmark { background-image: url(checkmark.svg); }
38+
icon: "checkmark"
39+
},
40+
secondCommand: {
41+
name: "Copy",
42+
// or inject an inline <svg> (or <img>) directly into the item and
43+
// return a class name to mark it as done (see the icon option docs)
44+
icon: function (opt, $itemElement) {
45+
$itemElement.prepend('<svg class="context-menu-icon" ...>...</svg>');
46+
return 'context-menu-icon-inline';
47+
}
48+
}
49+
}
50+
```
51+
2852
## Customize CSS
2953

3054
You can use the _variables.scss to adjust variables on pretty much everything you want to change.

0 commit comments

Comments
 (0)