You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: modules/ROOT/pages/creating-an-icon-pack.adoc
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,18 +8,18 @@
8
8
9
9
This guide provides comprehensive coverage of creating, building, and deploying custom icon packs, including solutions to common issues. It details two approaches:
10
10
11
-
* The inline approach, for adding a small number of custom icons
12
-
* The icon file approach, usingtheIcon Pack Template project to easily generate the required output file from a folder of SVGs.
11
+
* The manual approach, for adding a small number of custom icons
12
+
* Using the xref:using-the-icon-pack-template.adoc[Icon Pack Template tool] to easily generate the required output file from a folder of SVGs.
13
13
14
14
== How Icons Work in {productname}
15
15
16
-
A {productname} icon pack is a JavaScript construct containing strings of link:https://developer.mozilla.org/en-US/docs/Web/SVG[SVG's]. Icon packs are often kept in separate files, but can be inlined if needed. An icon pack can be used to add one or more custom icons or to replace some or all of the default {productname} icons.
16
+
A {productname} icon pack is a JavaScript construct containing strings of link:https://developer.mozilla.org/en-US/docs/Web/SVG[SVGs]. Icon packs are often kept in separate files, but can be inlined if needed. An icon pack can be used to add one or more custom icons or to replace some or all of the default {productname} icons.
17
17
18
18
An icon pack only **requires** the custom icons to be included; the default {productname} icons are used as a fallback for icons missing from the custom icon pack.
19
19
20
20
== Registering an icon pack
21
21
22
-
Icon packs are registered with {productname} using the IconManager. Whether creating the icon pack manually or using the Icon Pack Template tool, the JavaScript required to setup an icon pack looks like:
22
+
Icon packs are registered with {productname} using the IconManager. Whether creating the icon pack manually or using the xref:using-the-icon-pack-template.adoc[Icon Pack Template tool], the JavaScript required to setup an icon pack looks like:
When adding only a few icons, it may be easier to manually configure the new icon pack than to use the Icon Pack Template tool. To do this:
38
+
When adding only a few icons, it may be easier to manually configure the new icon pack than to use the xref:using-the-icon-pack-template.adoc[Icon Pack Template tool]. To do this:
39
39
40
40
. Gather the SVG files for the new icons. Extract their content string, e.g. `+<svg width="24" height="24">...</svg>+`
41
41
. Call `+tinymce.IconManager.add()+`
@@ -49,7 +49,7 @@ The new icons can then be used by name within {productname}.
49
49
*Icon Override:* If custom icons have the same name as a default {productname} icon, they will override the default icon.
50
50
====
51
51
52
-
This JavaScript can be included as a separate icon file or inlined beside the application's `+tinymce.init()+` call. Configure {productname} to load the icon pack and possibly where from.
52
+
This JavaScript can be included as a separate icon file or inlined beside the application's `+tinymce.init()+` call. Configure {productname} to load the icon pack and, if necessary, where from using the xref:editor-icons.adoc#icons[`+icons+`] and xref:editor-icons.adoc#icons_url[`+icons_url+`] options.
0 commit comments