client/web: update vite-plugin-svgr to latest version (tailscale#11197)

Update vite-plugin-svgr to the latest version (4.2.0) ahead of updating vite to 5.x. This is a major version bump from our previous 3.x, and requires changing the import paths used for SVGs. Updates tailscale/corp#17715 Signed-off-by: Mario Minardi <mario@tailscale.com>
nshalman · Feb 22, 2024 · 72140da · 72140da
1 parent edbad6d
commit 72140da
Show file tree

Hide file tree

Showing 15 changed files with 135 additions and 103 deletions.
diff --git a/client/web/package.json b/client/web/package.json
@@ -34,7 +34,7 @@
     "typescript": "^4.7.4",
     "vite": "^4.5.2",
     "vite-plugin-rewrite-all": "^1.0.1",
-    "vite-plugin-svgr": "^3.2.0",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^3.5.0",
     "vitest": "^0.32.0"
   },

diff --git a/client/web/src/components/address-copy-card.tsx b/client/web/src/components/address-copy-card.tsx
@@ -4,8 +4,8 @@
 import * as Primitive from "@radix-ui/react-popover"
 import cx from "classnames"
 import React, { useCallback } from "react"
-import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
-import { ReactComponent as Copy } from "src/assets/icons/copy.svg"
+import ChevronDown from "src/assets/icons/chevron-down.svg?react"
+import Copy from "src/assets/icons/copy.svg?react"
 import NiceIP from "src/components/nice-ip"
 import useToaster from "src/hooks/toaster"
 import Button from "src/ui/button"

diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
+import TailscaleIcon from "src/assets/icons/tailscale-icon.svg?react"
 import LoginToggle from "src/components/login-toggle"
 import DeviceDetailsView from "src/components/views/device-details-view"
 import DisconnectedView from "src/components/views/disconnected-view"

diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
@@ -4,8 +4,8 @@
 import cx from "classnames"
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useAPI } from "src/api"
-import { ReactComponent as Check } from "src/assets/icons/check.svg"
-import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
+import Check from "src/assets/icons/check.svg?react"
+import ChevronDown from "src/assets/icons/chevron-down.svg?react"
 import useExitNodes, {
   noExitNode,
   runAsExitNode,

diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
@@ -3,9 +3,9 @@
 
 import cx from "classnames"
 import React, { useCallback, useEffect, useState } from "react"
-import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
-import { ReactComponent as Eye } from "src/assets/icons/eye.svg"
-import { ReactComponent as User } from "src/assets/icons/user.svg"
+import ChevronDown from "src/assets/icons/chevron-down.svg?react"
+import Eye from "src/assets/icons/eye.svg?react"
+import User from "src/assets/icons/user.svg?react"
 import { AuthResponse, AuthType } from "src/hooks/auth"
 import { NodeData } from "src/types"
 import Button from "src/ui/button"

diff --git a/client/web/src/components/views/disconnected-view.tsx b/client/web/src/components/views/disconnected-view.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
+import TailscaleIcon from "src/assets/icons/tailscale-icon.svg?react"
 
 /**
  * DisconnectedView is rendered after node logout.

diff --git a/client/web/src/components/views/home-view.tsx b/client/web/src/components/views/home-view.tsx
@@ -4,8 +4,8 @@
 import cx from "classnames"
 import React, { useMemo } from "react"
 import { apiFetch } from "src/api"
-import { ReactComponent as ArrowRight } from "src/assets/icons/arrow-right.svg"
-import { ReactComponent as Machine } from "src/assets/icons/machine.svg"
+import ArrowRight from "src/assets/icons/arrow-right.svg?react"
+import Machine from "src/assets/icons/machine.svg?react"
 import AddressCard from "src/components/address-copy-card"
 import ExitNodeSelector from "src/components/exit-node-selector"
 import { NodeData } from "src/types"

diff --git a/client/web/src/components/views/login-view.tsx b/client/web/src/components/views/login-view.tsx
@@ -3,7 +3,7 @@
 
 import React, { useState } from "react"
 import { useAPI } from "src/api"
-import { ReactComponent as TailscaleIcon } from "src/assets/icons/tailscale-icon.svg"
+import TailscaleIcon from "src/assets/icons/tailscale-icon.svg?react"
 import { NodeData } from "src/types"
 import Button from "src/ui/button"
 import Collapsible from "src/ui/collapsible"

diff --git a/client/web/src/components/views/subnet-router-view.tsx b/client/web/src/components/views/subnet-router-view.tsx
@@ -4,9 +4,9 @@
 import cx from "classnames"
 import React, { useCallback, useMemo, useState } from "react"
 import { useAPI } from "src/api"
-import { ReactComponent as CheckCircle } from "src/assets/icons/check-circle.svg"
-import { ReactComponent as Clock } from "src/assets/icons/clock.svg"
-import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
+import CheckCircle from "src/assets/icons/check-circle.svg?react"
+import Clock from "src/assets/icons/clock.svg?react"
+import Plus from "src/assets/icons/plus.svg?react"
 import * as Control from "src/components/control-components"
 import { NodeData } from "src/types"
 import Button from "src/ui/button"

diff --git a/client/web/src/components/views/updating-view.tsx b/client/web/src/components/views/updating-view.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from "react"
-import { ReactComponent as CheckCircleIcon } from "src/assets/icons/check-circle.svg"
-import { ReactComponent as XCircleIcon } from "src/assets/icons/x-circle.svg"
+import CheckCircleIcon from "src/assets/icons/check-circle.svg?react"
+import XCircleIcon from "src/assets/icons/x-circle.svg?react"
 import { ChangelogText } from "src/components/update-available"
 import { UpdateState, useInstallUpdate } from "src/hooks/self-update"
 import { VersionInfo } from "src/types"

diff --git a/client/web/src/ui/collapsible.tsx b/client/web/src/ui/collapsible.tsx
@@ -3,7 +3,7 @@
 
 import * as Primitive from "@radix-ui/react-collapsible"
 import React, { useState } from "react"
-import { ReactComponent as ChevronDown } from "src/assets/icons/chevron-down.svg"
+import ChevronDown from "src/assets/icons/chevron-down.svg?react"
 
 type CollapsibleProps = {
   trigger?: string

diff --git a/client/web/src/ui/dialog.tsx b/client/web/src/ui/dialog.tsx
@@ -4,7 +4,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import cx from "classnames"
 import React, { Component, ComponentProps, FormEvent } from "react"
-import { ReactComponent as X } from "src/assets/icons/x.svg"
+import X from "src/assets/icons/x.svg?react"
 import Button from "src/ui/button"
 import PortalContainerContext from "src/ui/portal-container-context"
 import { isObject } from "src/utils/util"

diff --git a/client/web/src/ui/search-input.tsx b/client/web/src/ui/search-input.tsx
@@ -3,7 +3,7 @@
 
 import cx from "classnames"
 import React, { forwardRef, InputHTMLAttributes } from "react"
-import { ReactComponent as Search } from "src/assets/icons/search.svg"
+import Search from "src/assets/icons/search.svg?react"
 
 type Props = {
   className?: string

diff --git a/client/web/src/ui/toaster.tsx b/client/web/src/ui/toaster.tsx
@@ -10,7 +10,7 @@ import React, {
   useState,
 } from "react"
 import { createPortal } from "react-dom"
-import { ReactComponent as X } from "src/assets/icons/x.svg"
+import X from "src/assets/icons/x.svg?react"
 import { noop } from "src/utils/util"
 import { create } from "zustand"
 import { shallow } from "zustand/shallow"