Load svgs inline with svgr

.prettierrc

@@ -13,6 +13,12 @@
         "keywordCase": "lower",
         "logicalOperatorNewline": "before"
       }
+    },
+    {
+      "files": "*.svg",
+      "options": {
+        "parser": "html"
+      }
     }
   ]
 }

.vscode/settings.json

@@ -10,6 +10,9 @@
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "files.associations": {
+    "*.svg": "html"
+  },
   "sqltools.connections": [
     {
       "previewLimit": 50,

web/components/buttons/copy-link-button.tsx

@@ -5,15 +5,15 @@ import { Tooltip } from '../widgets/tooltip'
 import clsx from 'clsx'
 import { IconButton } from 'web/components/buttons/button'
 import toast from 'react-hot-toast'
-import LinkIcon from 'web/lib/icons/link-icon'
+import LinkIcon from 'web/lib/icons/link-icon.svg'
 import { postMessageToNative } from 'web/components/native-message-listener'
 import { NativeShareData } from 'common/native-share-data'
 import {
   CheckIcon,
   ClipboardCopyIcon,
   DuplicateIcon,
 } from '@heroicons/react/outline'
-import ArrowUpSquareIcon from 'web/lib/icons/arrow-up-square-icon'
+import ArrowUpSquareIcon from 'web/lib/icons/arrow-up-square-icon.svg'
 import { getNativePlatform } from 'web/lib/native/is-native'
 import { useBrowserOS } from 'web/hooks/use-browser-os'
 import { ShareIcon } from '@heroicons/react/outline'

web/components/buttons/tweet-button.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import { Contract } from 'common/contract'
 import { formatMoneyNumber, formatPercent } from 'common/util/format'
 import { getShareUrl } from 'common/util/share'
-import TwitterLogo from 'web/lib/icons/twitter-logo'
+import TwitterLogo from 'web/lib/icons/twitter-logo.svg'
 import { trackCallback } from 'web/lib/service/analytics'
 import { buttonClass } from './button'
 

web/components/comments/reply-toggle.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon.svg'
 import { Row } from '../layout/row'
 import { formatMoney } from 'common/util/format'
 

web/components/contract/contract-tabs.tsx

@@ -22,7 +22,7 @@ import { useHashInUrl } from 'web/hooks/use-hash-in-url'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { useLiquidity } from 'web/hooks/use-liquidity'
 import { useUser } from 'web/hooks/use-user'
-import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon.svg'
 import { track, withTracking } from 'web/lib/service/analytics'
 import { getOlderBets } from 'web/lib/supabase/bets'
 import { FreeResponseComments } from '../feed/feed-answer-comment-group'

web/components/editor/floating-format-menu.tsx

@@ -9,9 +9,9 @@ import { BubbleMenu } from '@tiptap/react'
 import clsx from 'clsx'
 import { getUrl } from 'common/util/parse'
 import { useState } from 'react'
-import BoldIcon from 'web/lib/icons/bold-icon'
-import ItalicIcon from 'web/lib/icons/italic-icon'
-import TypeIcon from 'web/lib/icons/type-icon'
+import BoldIcon from 'web/lib/icons/bold-icon.svg'
+import ItalicIcon from 'web/lib/icons/italic-icon.svg'
+import TypeIcon from 'web/lib/icons/type-icon.svg'
 
 // see https://tiptap.dev/guide/menus
 

web/components/feed/feed-chart.tsx

@@ -4,7 +4,7 @@ import { getHistoryData } from 'web/pages/embed/[username]/[contractSlug]'
 import { useViewScale } from '../charts/generic-charts'
 import { BinaryChart } from '../contract/contract-overview'
 import { DAY_MS } from 'common/util/time'
-import PlaceholderGraph from 'web/lib/icons/placeholder-graph'
+import PlaceholderGraph from 'web/lib/icons/placeholder-graph.svg'
 import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
 
 export function FeedBinaryChart(props: {

web/components/feed/feed-comments.tsx

@@ -36,9 +36,8 @@ import { useIsVisible } from 'web/hooks/use-is-visible'
 import { isBlocked, usePrivateUser, useUser } from 'web/hooks/use-user'
 import { createCommentOnContract, hideComment } from 'web/lib/firebase/api'
 import { firebaseLogin, User } from 'web/lib/firebase/users'
-import LinkIcon from 'web/lib/icons/link-icon'
-import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
-import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon.svg'
+import TriangleFillIcon from 'web/lib/icons/triangle-fill-icon.svg'
 import { track } from 'web/lib/service/analytics'
 import { scrollIntoViewCentered } from 'web/lib/util/scroll'
 import { Button, IconButton } from '../buttons/button'
@@ -51,6 +50,7 @@ import { InfoTooltip } from '../widgets/info-tooltip'
 import { Tooltip } from '../widgets/tooltip'
 import { isAdminId } from 'common/envs/constants'
 import { PaymentsModal } from 'web/pages/payments'
+import { FiLink } from 'react-icons/fi'
 import { GiPayMoney } from 'react-icons/gi'
 
 export type ReplyToUserInfo = { id: string; username: string }
@@ -378,7 +378,7 @@ export function DotMenu(props: {
         Items={buildArray(
           {
             name: 'Copy link',
-            icon: <LinkIcon className="h-5 w-5" />,
+            icon: <FiLink className="h-5 w-5" />,
             onClick: () => {
               copyLinkToComment(
                 contract.creatorUsername,

web/components/landing-page-panel.tsx

@@ -5,14 +5,14 @@ import { Row } from './layout/row'
 import { withTracking } from 'web/lib/service/analytics'
 import { useTracking } from 'web/hooks/use-tracking'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import SquiggleVerticalIcon from 'web/lib/icons/squiggle_vertical'
+import SquiggleVerticalIcon from 'web/lib/icons/squiggle_vertical.svg'
 import clsx from 'clsx'
 import { Button } from './buttons/button'
 import { useEffect, useState } from 'react'
-import SquiggleHorizontalIcon from 'web/lib/icons/squiggle_horizontal'
+import SquiggleHorizontalIcon from 'web/lib/icons/squiggle_horizontal.svg'
 import TypewriterComponent from 'typewriter-effect'
-import EquilateralLeftTriangle from 'web/lib/icons/equilateral-left-triangle'
-import EquilateralRightTriangle from 'web/lib/icons/equilateral-right-triangle'
+import EquilateralLeftTriangle from 'web/lib/icons/equilateral-left-triangle.svg'
+import EquilateralRightTriangle from 'web/lib/icons/equilateral-right-triangle.svg'
 import CountUp from 'react-countup'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { STARTING_BALANCE } from 'common/economy'

web/components/nav/sidebar.tsx

@@ -27,15 +27,15 @@ import { NotificationsIcon } from 'web/components/notifications-icon'
 import { DarkModeContext, useIsDarkMode } from 'web/hooks/dark-mode-context'
 import { useUser } from 'web/hooks/use-user'
 import { firebaseLogin, firebaseLogout } from 'web/lib/firebase/users'
-import TrophyIcon from 'web/lib/icons/trophy-icon'
+import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
 import { withTracking } from 'web/lib/service/analytics'
 import { MobileAppsQRCodeDialog } from '../buttons/mobile-apps-qr-code-button'
 import { SidebarSignUpButton } from '../buttons/sign-up-button'
 import { ManifoldLogo } from './manifold-logo'
 import { ProfileSummary } from './profile-summary'
 import { SearchButton } from './search-button'
 import { SidebarItem } from './sidebar-item'
-import SquaresIcon from 'web/lib/icons/squares-icon'
+import SquaresIcon from 'web/lib/icons/squares-icon.svg'
 
 export default function Sidebar(props: {
   className?: string

web/components/notification-settings.tsx

@@ -42,7 +42,7 @@ import { postMessageToNative } from 'web/components/native-message-listener'
 import { UserWatchedContractsButton } from 'web/components/notifications/watched-markets'
 import { usePrivateUser, useUser } from 'web/hooks/use-user'
 import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
-import TrophyIcon from 'web/lib/icons/trophy-icon'
+import TrophyIcon from 'web/lib/icons/trophy-icon.svg'
 
 const emailsEnabled: Array<notification_preference> = [
   'all_comments_on_watched_markets',

web/components/portfolio/portfolio-value-section.tsx

@@ -9,7 +9,7 @@ import { GraphMode, PortfolioGraph } from './portfolio-value-graph'
 import { SizedContainer } from 'web/components/sized-container'
 import { Period } from 'web/lib/firebase/users'
 import { useEvent } from 'web/hooks/use-event'
-import PlaceholderGraph from 'web/lib/icons/placeholder-graph'
+import PlaceholderGraph from 'web/lib/icons/placeholder-graph.svg'
 import { TimeRangePicker } from '../charts/time-range-picker'
 import { ColorType } from '../widgets/choices-toggle-group'
 import { useViewScale } from '../charts/generic-charts'

web/components/swipe/swipe-sharer.tsx

@@ -2,7 +2,7 @@ import toast from 'react-hot-toast'
 
 import { BinaryContract } from 'common/contract'
 import { track } from 'web/lib/service/analytics'
-import ArrowUpSquareIcon from '../../lib/icons/arrow-up-square-icon'
+import ArrowUpSquareIcon from 'web/lib/icons/arrow-up-square-icon.svg'
 import { getIsNative } from '../../lib/native/is-native'
 import { postMessageToNative } from '../native-message-listener'
 import { NativeShareData } from 'common/native-share-data'

web/components/testimonials-panel.tsx

@@ -13,10 +13,10 @@ import { Button } from 'web/components/buttons/button'
 import { withTracking } from 'web/lib/service/analytics'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { STARTING_BALANCE } from 'common/economy'
-import SquiggleVerticalFlippedIcon from 'web/lib/icons/squiggle_vertical_flipped'
-import SquiggleHorizontalFlippedIcon from 'web/lib/icons/squiggle_horizontal_flipped'
-import StartQuoteIcon from 'web/lib/icons/start_quote'
-import EndQuoteIcon from 'web/lib/icons/start_quote copy'
+import SquiggleVerticalFlippedIcon from 'web/lib/icons/squiggle_vertical_flipped.svg'
+import SquiggleHorizontalFlippedIcon from 'web/lib/icons/squiggle_horizontal_flipped.svg'
+import StartQuoteIcon from 'web/lib/icons/start_quote.svg'
+import EndQuoteIcon from 'web/lib/icons/start_quote.svg'
 import testimonials from '../public/testimonials/testimonials.json'
 
 export function TestimonialsPanel() {

web/components/widgets/user-link.tsx

@@ -12,7 +12,7 @@ import { BadgeCheckIcon } from '@heroicons/react/outline'
 import { Row } from '../layout/row'
 import { Avatar } from './avatar'
 import { DAY_MS } from 'common/util/time'
-import ScalesIcon from 'web/lib/icons/scales-icon'
+import ScalesIcon from 'web/lib/icons/scales-icon.svg'
 import { linkClass } from './site-link'
 
 export const isFresh = (createdTime: number) =>