|
| 1 | +# Step 6: Add icon |
| 2 | + |
| 3 | +In this last step, we will create a panel icon for our Quote content type so that it has a unique but visually consistent identity alongside Page Builder's native font icons. When finished, the panel icon for our Quote content type will look something like this: |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## About icons |
| 8 | + |
| 9 | +The icons used for Page Builder's built-in content types are actually font icons. You could create your own font icons and use those within your module in a similar manner, but we recommend a simpler, more straightforward way by using SVG or PNG images instead. |
| 10 | + |
| 11 | +A summary of the steps for creating and adding this icon are listed here: |
| 12 | + |
| 13 | +1. Create your SVG or PNG icon. |
| 14 | +2. Create a CSS class for the icon. |
| 15 | +3. Reference the icon class in the config file. |
| 16 | + |
| 17 | +## Create your icon |
| 18 | + |
| 19 | +As mentioned, you can create a PNG or an SVG icon, but we recommend creating SVG icons for their smaller size and resolution independent rendering in browsers and mobile devices. Use the following specifications to create a panel icon that integrates seemlessly with the existing panel icons. |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +As the illustration shows, the artboard represents the actual width and height of your icon when it is exported from your graphics application (16 x 16px). The artwork represents the content of your icon. Following these dimensions ensures your icons will match the size and positioning of the existing Page Builder icons within the panel. |
| 24 | + |
| 25 | +When finished, add your icon to your `images` directory as follows: |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | +## Create CSS class for icon |
| 30 | + |
| 31 | +The next step to integrating your icon into the panel is creating a CSS class that references your SVG file. This class should be added to your LESS file in `adminhtml` as shown here: |
| 32 | + |
| 33 | + |
| 34 | + |
| 35 | +The CSS for integrating SVG and PNG images with the font icons used by Page Builder can be a bit tricky in terms of matching size and positioning. As such, we recommend the following CSS rule set and conventions, changing only the content url path to your icon: |
| 36 | + |
| 37 | +```css |
| 38 | +.icon-pagebuilder-quote { |
| 39 | + content: url(../Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg); |
| 40 | + width: 18px; |
| 41 | + height: 18px; |
| 42 | + margin-bottom: -1px; |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +| Attribute | Description | |
| 47 | +| --------------- | ------------------------------------------------------------ | |
| 48 | +| `class name` | To match the class names of Page Builder's native icons, we recommend prefixing your icon names with `icon-pagebuilder` as we have done with our Quote icon. | |
| 49 | +| `content` | The relative path to your SVG or PNG icon when rendered from `pub/static`. More details follow below. | |
| 50 | +| `width` | Sets the width of the content area that most closely matches the widths of Page Builder icon fonts. | |
| 51 | +| `height` | Sets the height of the content area that most closely matches the widths of Page Builder icon fonts. | |
| 52 | +| `margin-bottom` | Pulls the SVG or PNG image down within the panel container to more closely match the positioning of Page Builder's font icon. | |
| 53 | + |
| 54 | +### Content path to icon image |
| 55 | + |
| 56 | +When you add the relative content path to your SVG or PNG image, you must start from the consolidated `styles.css` within `pub/static` as shown below. |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +In the case of our Quote icon, the relative path must be set as: |
| 61 | + |
| 62 | +```css |
| 63 | +.icon-pagebuilder-quote { |
| 64 | + content: url(../Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg); |
| 65 | + ... |
| 66 | +} |
| 67 | +``` |
| 68 | + |
| 69 | +This referencing your image from your CSS icon class ensures that the link to your image will be created in the static output and the icon will resolve in the browser. |
| 70 | + |
| 71 | +## Add icon class to config file |
| 72 | + |
| 73 | +The last step is to add our icon's class name to our config file. Previous to this step, we used an existing icon class: `icon-pagebuilder-heading`. Now we can replace this class with our new class: `icon-pagebuilder-quote`, as shown here: |
| 74 | + |
| 75 | +```xml |
| 76 | +<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd"> |
| 77 | + <type name="example_quote" |
| 78 | + label="Quote" |
| 79 | + group="elements" |
| 80 | + component="Magento_PageBuilder/js/content-type" |
| 81 | + preview_component="Example_PageBuilderQuote/js/content-type/example-quote/preview" |
| 82 | + master_component="Magento_PageBuilder/js/content-type/master" |
| 83 | + form="pagebuilder_example_quote_form" |
| 84 | + icon="icon-pagebuilder-quote" |
| 85 | + sortOrder="21" |
| 86 | + translate="label" |
| 87 | + > |
| 88 | +``` |
| 89 | + |
| 90 | +That's it. Now you can regenerate your static assets, empty your browser cache, and do a hard reload of your Admin page to see your new icon in the panel. |
| 91 | + |
| 92 | + |
| 93 | + |
| 94 | + |
0 commit comments