fix(Readme.mdx): fixed readme doc with correct import directory for custom icons

[Lakesxo]

Purpose of PR

• I realized that custom icons can not be imported from "@contentful/f36-components" rather they are imported from "@contentful/f36-icons" but the docs says otherwise. So I have decided to kindly point this out and improve the page with the right import directory ❤️

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6eeecf5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@Lakesxo is attempting to deploy a commit to the Contentful Apps Team on Vercel.

A member of the Team first needs to authorize it.

[denkristoffer]

👋 Hi @Lakesxo, thanks for the contribution! I see your point here, I had to go back and read it again myself to understand what is going on. The code import is actually the right one, but the comment above it is not explaining what we mean by "custom icons", which leads to confusion.

What the second import tries to tell us is how to render totally custom icons like something from a third-party library https://f36.contentful.com/components/icon#custom-icons-and-third-party-libraries – do you have a suggestion how we can phrase this better? Do you find // or, for third-party icons clearer?

[Lakesxo]

👋 Hi @Lakesxo, thanks for the contribution! I see your point here, I had to go back and read it again myself to understand what is going on. The code import is actually the right one, but the comment above it is not explaining what we mean by "custom icons", which leads to confusion.

What the second import tries to tell us is how to render totally custom icons like something from a third-party library https://f36.contentful.com/components/icon#custom-icons-and-third-party-libraries – do you have a suggestion how we can phrase this better? Do you find // or, for third-party icons clearer?

Oh okay. Yeah i think the third-party icons phrase sounds better @denkristoffer
But when i tried to import a forma custom icon e.g PlusIcon from "@contentful/f36-components" it didn't work until i imported from "@contentful/f36-icons";

[denkristoffer]

@Lakesxo No you're right, that's the way to do it. Maybe we should change the first line to make it more clear too 🤔

[Lakesxo]

@denkristoffer Yeah i think you should. Maybe something like:

// Import as an object :
import * as icons from '@contentful/f36-icons';
// Import single component as :
import { PlusIcon, DoneIcon } from "@contentful/f36-icons";
// Third party custom icons as :
import { Icon } from '@contentful/f36-components';

Access import as an object:

function IconExample() {
     return (
          <>
              {icons.PlusIcon}
              {icons.DoneIcon}
          </>
     )
}

OR

Access import as a single component:

function IconExample() {
     return (
          <>
              <PlusIcon />
              <DoneIcon />
          </>
     )
}

[denkristoffer]

@Lakesxo That looks good to me 😄 Would you like to update the PR with that?

[Lakesxo]

@Lakesxo That looks good to me 😄 Would you like to update the PR with that?

Sure, will do @denkristoffer

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2023 9:37am

[github-actions]

Marking pull request as stale since there was no activity for 30 days

[denkristoffer]

@all-contributors add @Lakesxo for docs

[allcontributors]

@denkristoffer

I've put up a pull request to add @Lakesxo! 🎉

[denkristoffer]

Thanks for the contribution @Lakesxo! I'm sorry it took so long to get merged 🙇 Thanks again!