Skip to content

Commit 95f5003

Browse files
iobradodingo-d
andauthored
Apply suggestions from code review
Co-authored-by: Denis Žoljom <dingo-d@users.noreply.github.com>
1 parent f0c63e8 commit 95f5003

File tree

1 file changed

+8
-9
lines changed

1 file changed

+8
-9
lines changed

website/blog/2022-04-25-using-assets.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ tags: [eightshift, boilerplate, assets, images, icons]
88
hide_table_of_contents: false
99
---
1010

11-
Previously we went through the process of adding fonts to your project. While the process of adding additional assets like images or icons has some similarities to adding fonts, it also has its unique steps. In this post, we'll cover multiple ways of adding assets and using them on your site.
11+
Previously, we went through the process of adding fonts to your project. While the process of adding additional assets like images or icons has some similarities to adding fonts, it also has its unique steps. In this post, we'll cover multiple ways of adding assets and using them on your site.
1212
<!--truncate-->
1313

1414
## Adding images
@@ -33,7 +33,7 @@ You can see how this is being used for rendering both favicon and header logo in
3333

3434
> **Tip**: Don't hardcode the filter name in the `apply_filters` function. Always call it via class constants.
3535
36-
For better organization, you can add additional folders (e.g. **_icons_**, **_placeholders_**) inside **_assets/images_** folder. Here's an example how to include them:
36+
For better organization, you can add additional folders (e.g. **_icons_**, **_placeholders_**) inside the **_assets/images_** folder. Here's an example of how to include them:
3737

3838
```js
3939
// Icons
@@ -46,21 +46,21 @@ import './placeholders/page.png';
4646

4747
## Using SVG files from manifest
4848

49-
Another approach you can take is to include an SVG file inside your component or block manifest. As a matter of fact, we already mentioned that component in a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme). We are talking about Quote component.
49+
If you recall from a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), you might have already seen an alternative approach to including SVG files in your block or component.
5050

5151
> If you don't have it in your project, be sure to read our blog post about adding blocks and components by using [WP CLI](/blog/adding-blocks-wpcli).
5252
53-
Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name which we will use to fetch the icon, while the value is SVG code.
53+
Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name that we will use to fetch the icon, while the value is SVG code.
5454

5555
```json
5656
"resources": {
5757
"icon": "<svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>...</svg>"
5858
}
5959
```
6060

61-
In order to make minification of SVG files as easy as possible, our teammate Goran made an awesome tool called [SVG2WP](https://svg-2-wp.goranalkovic.com/). Some of the options include making attributes JSX compatible, or replacing the color value with `currentColor`, which can then be used to change the SVG color through CSS.
61+
In order to make the minification of SVG files as easy as possible, our teammate Goran made an awesome tool called [SVG2WP](https://svg-2-wp.goranalkovic.com/). Some of the options include making attributes JSX compatible, or replacing the color value with `currentColor`, which can then be used to change the SVG color through CSS.
6262

63-
If you've been reading through these blog posts regularly, then you've already seen the use of `currentColor`. In our blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), we modified the color of the SVG.
63+
You've already seen the use of `currentColor` in the above-mentioned blog post, where we've modified the color of the SVG.
6464

6565
The output of the icon on frontend is very simple. In the Quote component, it was done the following way:
6666
```php
@@ -71,7 +71,7 @@ The output of the icon on frontend is very simple. In the Quote component, it wa
7171
</i>
7272
```
7373

74-
An excellent example where you can see in even more detail how SVGs are being used is our `icon` component. It isn't included in Eightshift theme by default, so you have to add it to your project with WP CLI. To include it in your project, use the following command:
74+
An excellent example, where you can see in even more detail how SVGs are being used, is our `icon` component. It isn't included in Eightshift theme by default, so you have to add it to your project with WP CLI. To include it in your project, use the following command:
7575

7676
```bash
7777
wp boilerplate use_component --name=icon
@@ -88,7 +88,6 @@ echo Components::render(
8888
'iconName' => 'download',
8989
]
9090
);
91-
?>
9291
```
9392

9493
Here are some examples of icons available out-of-the-box in our Icon component:
@@ -97,7 +96,7 @@ Here are some examples of icons available out-of-the-box in our Icon component:
9796

9897
## Using icons for editor and block options
9998

100-
When developing your blocks and adding new options, you may need to add some icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/storybook) under `Editor -> Icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
99+
When developing your blocks and adding new options, you may need to add icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/storybook) under `Editor -> Icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
101100
```jsx
102101
import { ColorPaletteCustom, IconLabel, icons } from '@eightshift/frontend-libs/scripts';
103102

0 commit comments

Comments
 (0)