refactor: use SVG icon for home breadcrumb

[Dr-Electron]

Motivation

I think this improves the looks of the breadcrumbs

I also gave an outlined version a quick try, but I think I still prefer the filled version 🤔
Also a wider stroke didn't really made it better for my taste 😅 . But I'm happy to change if you like it better.

Have you read the Contributing Guidelines on pull requests?

Yes

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	514928d
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/625f87e7fe48870009223f09
😎 Deploy Preview	https://deploy-preview-7183--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	65
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7183--docusaurus-2.netlify.app/

[Josh-Cena]

Can we use the primary color so it looks slightly more like a link?

[lex111]

Let's take the house icon from the Google collection? It's more compact by size, just compare:

<svg height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>

[lex111]

Can we use the primary color so it looks slightly more like a link?

It can be confusing, since primary color applies only to the active item of the breadcrumbs.

[Josh-Cena]

Let's take the house icon from the Google collection?

That one has sharp edges, though, while all the other icons in our design system look "rounder". (I noticed a few do have square edges but I think we should update them as well, considering our boxes are round-cornered.) At best we need to edit that icon so it has rounded corners as well.

since primary color applies only to the active item of the breadcrumbs.

Make sense

[lex111]

They provided the rounded variant too https://fonts.google.com/icons?icon.query=home&icon.style=Rounded

[Josh-Cena]

Ah, that's nice!

[Josh-Cena]

@lex111 FYI, there's a corner where the breadcrumb gets active state but not the link. Maybe you want to take a look?

[lex111]

That's the way it's meant to be, or do you have something else in mind?

[Josh-Cena]

I think it should not be active when the cursor is not in that highlighted region. The background color should appear at the same instant as the text becomes green.

[slorber]

Thanks, LGTM 👍

[slorber]

The background color should appear at the same instant as the text becomes green.

Agree on that

There's something weird in Infima, because even hovering the "next" arrow, the background changes color immediately

[lex111]

I think it should not be active when the cursor is not in that highlighted region. The background color should appear at the same instant as the text becomes green.

Will be fixed in facebookincubator/infima#241

[Dr-Electron]

Thanks for fixing it and merging. Sorry that I didn't help. Was a busy week 😅