Skip to content

Commit

Permalink
fix: remove ibm z pictograms (#3114)
Browse files Browse the repository at this point in the history
* fix: remove ibm z pictograms

* chore: format
  • Loading branch information
jnm2377 authored Aug 26, 2022
1 parent c5938dc commit 0fa2711
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ const IconCategory = ({ category, pictograms, columnCount }) => {
.filter((pictogram) => {
if (
pictogram.name === 'ibm--z' ||
pictogram.name === 'ibm--z--partition'
pictogram.name === 'ibm--z--partition' ||
pictogram.name === 'ibm--z-and-linuxone-multi-frame' ||
pictogram.name === 'ibm--z-and-linuxone-single-frame'
) {
return false;
}
Expand Down
20 changes: 15 additions & 5 deletions src/pages/developing/angular-tutorial/step-1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,10 @@ package.

#### Import and register icons

Now let’s import the icons from our `@carbon/icons` package. To improve tree shaking & keep the size of our app small, import only the required icons. To do so, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in `app.module.ts`.
Now let’s import the icons from our `@carbon/icons` package. To improve tree
shaking & keep the size of our app small, import only the required icons. To do
so, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in
`app.module.ts`.

<!-- prettier-ignore-start -->
```javascript path=src/app/header/app.modules.ts
Expand All @@ -312,8 +315,13 @@ import AppSwitcher20 from '@carbon/icons/es/app-switcher/20';
```
<!-- prettier-ignore-end -->

Now you need to register the icon via `IconService` that also needs to be imported from `carbon-components-angular` module.
After importing IconService you need to inject it in component constructor and us it in OnInit life cycle component hook. There are 2 methods for icon registration `.register()` which accepts only one icon and `.registerAll()` which accepts array of icons. As we are going to use more than one icon we are going to use the later method as below.
Now you need to register the icon via `IconService` that also needs to be
imported from `carbon-components-angular` module. After importing IconService
you need to inject it in component constructor and us it in OnInit life cycle
component hook. There are 2 methods for icon registration `.register()` which
accepts only one icon and `.registerAll()` which accepts array of icons. As we
are going to use more than one icon we are going to use the later method as
below.

<!-- prettier-ignore-start -->
```javascript path=src/app/header/header.component.ts
Expand All @@ -328,7 +336,8 @@ constructor(protected iconService: IconService) {}
```
<!-- prettier-ignore-end -->

Next step is to import the `IconModule` in the `AppModule` module where the `HeaderComponent` is declared.
Next step is to import the `IconModule` in the `AppModule` module where the
`HeaderComponent` is declared.

<!-- prettier-ignore-start -->
```javascript path=src/app/header/header.component.ts
Expand All @@ -342,7 +351,8 @@ imports: [
```
<!-- prettier-ignore-end -->

Now the icon is ready to be used in template code. Template in `header.component.html` should look like this:
Now the icon is ready to be used in template code. Template in
`header.component.html` should look like this:

<!-- prettier-ignore-start -->
```html path=src/app/header/header.component.html
Expand Down

1 comment on commit 0fa2711

@vercel
Copy link

@vercel vercel bot commented on 0fa2711 Aug 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.