Update dependency @heroicons/react to v2

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@heroicons/react	1.0.6 -> 2.0.8

---

Release Notes

tailwindlabs/heroicons

v2.0.8

Compare Source

v2.0.7

Compare Source

v2.0.6

Compare Source

v2.0.5

Compare Source

v2.0.4

Compare Source

v2.0.3

Compare Source

v2.0.2

Compare Source

v2.0.1

Compare Source

v2.0.0

Compare Source

We just released Heroicons v2.0 — a brand new icon set, illustrated from scratch, that includes icons in three distinct styles.

• Outline — line icons with a 1.5px stroke, drawn in a 24px view box.
• Solid — solid icons with filled shapes, drawn in a 24px view box.
• Mini — solid icons with filled shapes, drawn in a 20px view box.

Check out all of the new icons on the redesigned Heroicons v2.0 website.

Upgrading from v1

Heroicons v2.0 is a brand new icon set with a different visual style, so don't feel like you need to upgrade to avoid "being on the old version".

If you like how the v1 icons look in your project, stick with them! Heroicons v2 is more like Terminator 2 than OpenSSL 2 — they represent our best work but these are just little SVG pictures, the version you choose to use is personal preference, not a technical decision.

If you do want to upgrade to v2, understand that because it's an all-new icon set, switching to Heroicons v2 is more like migrating to a new icon set than it is just updating a dependency in your project. We've tried to make it pretty smooth, but because it's a new set, a lot things like import paths and icon names have changed, so there is some manual work involved in migrating.

Update dependencies

Install the latest version of the package you're using via npm:

### Using React
npm install @​heroicons/react@latest
### Using Vue
npm install @​heroicons/vue/@​latest

Update imports

Since Heroicons v2.0 comes with a new third style, we've updated the import paths for all of the icons to make them more explicit and future-proof.

### Using React

- import { ... } from '@​heroicons/react/solid'
+ import { ... } from '@​heroicons/react/20/solid'

- import { ... } from '@​heroicons/react/outline'
+ import { ... } from '@​heroicons/react/24/outline'
### Using Vue

- import { ... } from '@​heroicons/vue/solid'
+ import { ... } from '@​heroicons/vue/20/solid'

- import { ... } from '@​heroicons/vue/outline'
+ import { ... } from '@​heroicons/vue/24/outline'

Update icon names

Many of the icons have been renamed to more literal names that describe what the icon is, instead of describing what the icon should be used for. For example, mail has been renamed to envelope, and search has been renamed to magnifying-glass.

We're working on an official list that maps the old icon names to the new icon names that I'll update the release notes with in the next few days, but in the mean time several helpful community members have put together a working list in this issue:

List of icon name changes

Some icons from v1 don't exist in v2. Many of these we are currently redrawing and will add back over the next few days, but a few others likely won't return, notably the arrow-sm-{direction} icons. Instead, we're hoping to release a micro set with those smaller icons, since in hindsight it feels wrong to mix sizes within a single style. Even for those icons though we're planning to redraw them in both 24px and 20px artboards and update this guide to include the raw source for them, so you can still pull those SVGs into your projects even though we don't plan to include them in the library itself.

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by Mend Renovate. View repository job log here.

[vercel]

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

Name	Status	Preview	Updated
website	❌ Failed (Inspect)		Aug 30, 2022 at 0:56AM (UTC)

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 2.x releases. But if you manually upgrade to 2.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.