|
1 | 1 | --- |
2 | | -description: Learn how to append and use Icons. |
| 2 | +description: Create custom icon sets for use across the Umbraco backoffice. |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | # Icons |
6 | 6 |
|
7 | | -This article describes how to add and use more icons in your UI. |
8 | | - |
9 | | -{% hint style="warning" %} |
10 | | -This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice. |
11 | | -{% endhint %} |
| 7 | +Umbraco extension authors can create custom icon sets for use across the Umbraco backoffice using an extension type called `icons`. |
12 | 8 |
|
13 | 9 | ## Register a new set of icons |
14 | 10 |
|
15 | | -New icons can be added via an extension type called `icons`. |
16 | | - |
17 | | -You must add a new manifest to the Extension API to register icons. The manifest can be added through the `umbraco-package.json` file as shown in the snippet below. |
| 11 | +Icons must be registered in a manifest using the Extension API. The manifest can be added through the `umbraco-package.json` file, as shown below. |
18 | 12 |
|
19 | 13 | {% code title="umbraco-package.json" %} |
20 | | - |
21 | 14 | ```json |
22 | 15 | { |
23 | | - "name": "MyPackage", |
24 | | - "extensions": [ |
25 | | - { |
26 | | - "type": "icons", |
27 | | - "alias": "MyPackage.Icons.Unicorn", |
28 | | - "name": "MyPackage Unicorn Icons", |
29 | | - "js": "/App_Plugins/MyPackage/Icons/icons.js" |
30 | | - } |
31 | | - ] |
| 16 | + "$schema": "../../umbraco-package-schema.json", |
| 17 | + "name": "My Package", |
| 18 | + "version": "0.1.0", |
| 19 | + "extensions": [ |
| 20 | + { |
| 21 | + "type": "icons", |
| 22 | + "alias": "My.Icons.Unicorn", |
| 23 | + "name": "My Unicorn Icons", |
| 24 | + "js": "/App_Plugins/MyPackage/Icons/icons.js" |
| 25 | + } |
| 26 | + ] |
32 | 27 | } |
33 | 28 | ``` |
34 | | - |
35 | 29 | {% endcode %} |
36 | 30 |
|
37 | | -The file set in the `js` field holds the details about your Icons. The file should resemble the following: |
| 31 | +The file set in the `js` field contains the details of your icons. These definitions should resemble the following: |
38 | 32 |
|
39 | 33 | {% code title="icons.js" %} |
40 | | - |
41 | | -```typescript |
| 34 | +```javascript |
42 | 35 | export default [ |
43 | 36 | { |
44 | | - name: "myPackage-unicorn", |
| 37 | + name: "my-unicorn", |
45 | 38 | path: () => import("./icon-unicorn.js"), |
46 | 39 | }, |
47 | 40 | { |
48 | | - name: "myPackage-giraffe", |
| 41 | + name: "my-giraffe", |
49 | 42 | path: () => import("./icon-giraffe.js"), |
50 | 43 | } |
51 | 44 | ] |
52 | 45 | ``` |
53 | | - |
54 | 46 | {% endcode %} |
55 | 47 |
|
56 | | -The icon name needs to be prefixed to avoid collision with other icons. |
| 48 | +Prefix each icon name to avoid collisions with other icons. |
57 | 49 |
|
58 | | -Each icon must define a path, either as a string or a dynamic import as shown above. This file must be a JavaScript file containing a default export of an SVG string. See an example of this in the code snippet below. |
| 50 | +Each icon must define a path, either as a string or a dynamic import as shown above. This file must be a JavaScript file containing a default export of an SVG string. See an example below: |
59 | 51 |
|
60 | 52 | {% code title="icon-unicorn.js" %} |
61 | | - |
62 | | -```typescript |
| 53 | +```javascript |
63 | 54 | export default `<svg ...></svg>`; |
64 | 55 | ``` |
65 | | - |
66 | 56 | {% endcode %} |
67 | 57 |
|
68 | 58 | ### Using Icons in your UI |
69 | 59 |
|
70 | | -The `umb-icon` element is automatically able to consume any registered icon. |
71 | | - |
72 | | -The following example shows how to make a button using the above-registered icon. |
| 60 | +The `umb-icon` element can automatically consume any registered icon. |
73 | 61 |
|
74 | 62 | ```html |
75 | | -<uui-button compact label="Make the unicorn dance"> |
76 | | - <umb-icon name="myPackage-unicorn"></umb-icon> |
77 | | -</uui-button> |
| 63 | +<umb-icon name="my-unicorn"></umb-icon> |
78 | 64 | ``` |
0 commit comments