refactor(icons): replace all inline SVGs with SVG sprites

README.md

@@ -159,13 +159,11 @@ npm run deploy
 ### How to use FontAwesome in the project
 
 1. Search [FontAwesome Icons](https://fontawesome.com/icons)
-2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to
-   download it for you)
-3. Paste the SVG code into the `SVG INPUT` panel of
-   [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
-4. Copy the resulting `<svg>` tag in the `JSX OUTPUT` panel
-5. Paste the `<svg>` tag into the corresponding file under the
-   [icons](/app/icons/) directory
+2. Include the icons in the
+   [senarai](https://fontawesome.com/kits/5899c9809d/icons) icon kit. (please
+   ask @zainfathoni to do it for you)
+3. Upload the new SVG sprites to the `/public/images/` directory
+4. Use the `<Icon />` component and pass the icon set and id as props
 
 ## Frequently Used Commands
 

app/components/action-cards.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react'
 import { Link } from '@remix-run/react'
-import { classNames } from '../utils/class-names'
+import * as React from 'react'
 import { Categories } from '../model/categories'
+import { classNames } from '../utils/class-names'
+import { Icon } from './icon'
 
 export function ActionCards({ categories }: { categories: Categories }) {
   return (
@@ -29,7 +30,11 @@ export function ActionCards({ categories }: { categories: Categories }) {
                 'rounded-lg inline-flex p-3 ring-4 ring-white'
               )}
             >
-              <category.icon className="h-6 w-6" />
+              <Icon
+                set={category.iconSet}
+                id={category.iconId}
+                className="h-6 w-6"
+              />
             </span>
           </div>
           <div className="mt-8">

app/components/activities-grid.tsx

@@ -1,10 +1,10 @@
 import { useMatches } from '@remix-run/react'
 import * as React from 'react'
-import { Grid2Plus } from '../icons/duotone'
 import type { Activity } from '../model/activities'
 import { getCategoryByCategorySlug } from '../model/categories'
 import { classNames } from '../utils/class-names'
 import { Card } from './card'
+import { Icon } from './icon'
 import { senaraiForm } from './top-navigation'
 
 export function ActivitesGrid({ activities }: { activities: Activity[] }) {
@@ -19,7 +19,7 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
       <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {activities.map(
           ({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
-            const { icon, iconForeground, iconBackground, title } =
+            const { iconSet, iconId, iconForeground, iconBackground, title } =
               getCategoryByCategorySlug(categorySlug)
             return (
               <Card
@@ -39,7 +39,8 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
                 image={image}
                 category={title}
                 categorySlug={categorySlug}
-                icon={icon}
+                iconSet={iconSet}
+                iconId={iconId}
                 foregroundColor={iconForeground}
                 backgroundColor={iconBackground}
               />
@@ -52,7 +53,8 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
           cta="Usulkan"
           category={category.title}
           link={addNewActivityLink}
-          icon={Grid2Plus}
+          iconSet="duotone"
+          iconId="grid-2-plus"
           foregroundColor={category.iconForeground}
           backgroundColor={category.iconBackground}
         />
@@ -68,7 +70,11 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
             'rounded-xl inline-flex p-4 mb-4 ring-4 ring-white'
           )}
         >
-          <category.icon className="w-16 h-16 flex-shrink-0 mx-auto " />
+          <Icon
+            set={category.iconSet}
+            id={category.iconId}
+            className="w-16 h-16 flex-shrink-0 mx-auto"
+          />
         </div>
         <h2 className="mt-2 text-sm font-medium text-gray-900">
           Belum ada aktivitas {category.title}
@@ -84,7 +90,12 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
             rel="noopener noreferrer"
             className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
           >
-            <Grid2Plus className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+            <Icon
+              set="duotone"
+              id="grid-2-plus"
+              className="-ml-1 mr-2 h-5 w-5"
+              aria-hidden="true"
+            />
             Usulkan Aktivitas
           </a>
         </div>

app/components/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { Link, useMatches } from '@remix-run/react'
 import * as React from 'react'
 import { categoriesRecord } from '../model/categories'
-import { Duotone } from './icons'
+import { Icon } from './icon'
 
 export default function Breadcrumbs() {
   const matches = useMatches()
@@ -15,7 +15,8 @@ export default function Breadcrumbs() {
           <li className="flex">
             <div className="flex items-center">
               <Link to="/" className="text-gray-500 hover:text-gray-700">
-                <Duotone
+                <Icon
+                  set="duotone"
                   id="house"
                   className="flex-shrink-0 h-5 w-5"
                   aria-hidden="true"

app/components/card.tsx

@@ -1,8 +1,8 @@
 /* This example requires Tailwind CSS v2.0+ */
-import * as React from 'react'
 import { Link } from '@remix-run/react'
+import * as React from 'react'
 import { classNames } from '../utils/class-names'
-import { ArrowUpRightFromSquare, PenToSquare } from '../icons/duotone'
+import { Icon } from './icon'
 
 export type CardProps = {
   name: string
@@ -14,7 +14,8 @@ export type CardProps = {
   category: string
   categorySlug?: string
   image?: string
-  icon?: (props: React.SVGProps<SVGSVGElement>) => React.ReactElement
+  iconSet?: string
+  iconId?: string
   foregroundColor?: string
   backgroundColor?: string
 }
@@ -29,7 +30,8 @@ export const Card: React.FC<CardProps> = ({
   image,
   category,
   categorySlug,
-  icon: Icon,
+  iconSet,
+  iconId,
   foregroundColor: iconForeground,
   backgroundColor: iconBackground,
 }) => {
@@ -42,8 +44,10 @@ export const Card: React.FC<CardProps> = ({
             src={image}
             alt=""
           />
-        ) : Icon ? (
+        ) : iconSet && iconId ? (
           <Icon
+            set={iconSet}
+            id={iconId}
             className={classNames(
               iconForeground,
               'w-16 h-16 flex-shrink-0 mx-auto'
@@ -92,7 +96,9 @@ export const Card: React.FC<CardProps> = ({
                 rel="noopener noreferrer"
                 className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
               >
-                <PenToSquare
+                <Icon
+                  set="duotone"
+                  id="arrow-up-right-from-square"
                   className="w-5 h-5 text-gray-400"
                   aria-hidden="true"
                 />
@@ -113,7 +119,9 @@ export const Card: React.FC<CardProps> = ({
                 className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
               >
                 <span className="mr-3">{cta}</span>
-                <ArrowUpRightFromSquare
+                <Icon
+                  set="duotone"
+                  id="arrow-up-right-from-square"
                   className="w-5 h-5 text-gray-400"
                   aria-hidden="true"
                 />

app/components/icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  set: 'solid' | 'light' | 'duotone'
+  id: string
+}
+
+export function Icon({ set, id, ...props }: IconProps) {
+  return (
+    <svg fill="currentColor" {...props}>
+      <use href={`/images/${set}.svg#${id}`} />
+    </svg>
+  )
+}

app/components/taxonomy.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Activity } from '../model/activities'
 import { isAllEmptyString } from '../utils/string'
-import { ChevronRight } from '../icons/solid'
+import { Icon } from './icon'
 
 export function Taxonomy({
   activity: { benua, negara, provinsi, kabupaten, kecamatan, desa },
@@ -29,8 +29,10 @@ export function Taxonomy({
           {rest.map((item) => (
             <li key={item}>
               <div className="flex items-center">
-                <ChevronRight
-                  className="flex-shrink-0 h-3 w-3 text-gray-400"
+                <Icon
+                  set="solid"
+                  id="chevron-right"
+                  className="flex-shrink-0 h-5 w-5 text-gray-400"
                   aria-hidden="true"
                 />
                 <div className="ml-1 text-sm font-medium text-gray-500 hover:text-gray-700">

app/components/top-navigation.tsx

@@ -1,14 +1,9 @@
-import * as React from 'react'
 import { Disclosure } from '@headlessui/react'
 import { Link, useMatches } from '@remix-run/react'
+import * as React from 'react'
 import { classNames } from '../utils/class-names'
-import {
-  ArrowUpRightFromSquare,
-  Bars,
-  MagnifyingGlass,
-  X,
-} from '../icons/duotone'
 import Breadcrumbs from './breadcrumbs'
+import { Icon } from './icon'
 
 export const senaraiForm = '/go/form'
 
@@ -34,7 +29,12 @@ const SearchBar = (props: TopNavigationProps) => {
       </label>
       <div className="relative text-gray-400 focus-within:text-gray-600">
         <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-          <MagnifyingGlass className="h-5 w-5" aria-hidden="true" />
+          <Icon
+            set="duotone"
+            id="magnifying-glass"
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
         </div>
         <input
           id={props.id}
@@ -91,7 +91,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                             rel="noopener noreferrer"
                           >
                             {item.name}
-                            <ArrowUpRightFromSquare
+                            <Icon
+                              set="duotone"
+                              id="arrow-up-right-from-square"
                               className="ml-2 h-4 w-4 inline -mt-1"
                               aria-hidden="true"
                             />
@@ -126,9 +128,19 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                   <Disclosure.Button className="bg-indigo-600 p-2 rounded-md inline-flex items-center justify-center text-indigo-200 hover:text-white hover:bg-indigo-500 hover:bg-opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 focus:ring-white">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
-                      <X className="block h-6 w-6" aria-hidden="true" />
+                      <Icon
+                        set="duotone"
+                        id="x"
+                        className="h-6 w-6"
+                        aria-hidden="true"
+                      />
                     ) : (
-                      <Bars className="block h-6 w-6" aria-hidden="true" />
+                      <Icon
+                        set="duotone"
+                        id="bars"
+                        className="h-6 w-6"
+                        aria-hidden="true"
+                      />
                     )}
                   </Disclosure.Button>
                 </div>
@@ -161,7 +173,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                   >
                     {item.name}
                     {item.external ? (
-                      <ArrowUpRightFromSquare
+                      <Icon
+                        set="duotone"
+                        id="arrow-up-right-from-square"
                         className="ml-2 h-4 w-4 inline -mt-1"
                         aria-hidden="true"
                       />