diff --git a/src/pages/developing/react-tutorial/images/carbon-badge.png b/src/pages/developing/react-tutorial/images/carbon-badge.png deleted file mode 100644 index 91b47daf235..00000000000 Binary files a/src/pages/developing/react-tutorial/images/carbon-badge.png and /dev/null differ diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx index f3a18d15e92..e227ce67c4f 100644 --- a/src/pages/developing/react-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -21,8 +21,8 @@ import Preview from 'components/Preview'; With two pages comprised entirely of Carbon components, let's revisit the -landing page and build a couple components of our own by using Carbon icons and -tokens. +landing page and build a couple components of our own by using Carbon pictograms +and tokens. @@ -246,11 +246,21 @@ Nothing is styled yet, but with our components built let's put them to use. In import { InfoSection, InfoCard } from '@/components/Info/Info'; ``` -While we're at the top of `LandingPage`, import the icons that we'll need as -well. +Next, we will install the pictograms we will use in the header. + +```bash +yarn add @carbon/pictograms-react +``` + +While we're at the top of `LandingPage`, import the pictograms that we'll need +as well. ```javascript path=src/app/home/page.js -import { Globe, Application, PersonFavorite } from '@carbon/react/icons'; +import { + Advocate, + Globe, + AcceleratingTransformation, +} from '@carbon/pictograms-react'; ``` With everything imported, replace the current: @@ -407,12 +417,12 @@ const InfoCard = (props) => { ``` Finally, add the declaration block in `_info.scss` to set `InfoCard` body copy -styles and to bottom-align the icons. +styles and to bottom-align the pictograms. ```scss path=src/components/Info/_info.scss .info-card__body { margin-top: $spacing-06; - flex-grow: 1; // fill space so icons are bottom aligned + flex-grow: 1; // fill space so pictograms are bottom aligned @include type-style('body-long-01'); // prevent large line lengths between small and medium viewports