use svg loader in docs website

docs/components/features/index.tsx

@@ -1,3 +1,4 @@
+import { ArrowRightIcon } from '@components/icons'
 import cn from 'clsx'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
@@ -32,18 +33,7 @@ export function Feature({
       {children}
       {href ? (
         <Link className={styles.link} href={href} target="_blank">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1.5em"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-              clipRule="evenodd"
-            />
-          </svg>
+          <ArrowRightIcon width="1.5em" />
         </Link>
       ) : null}
     </motion.div>

docs/components/icons/index.ts

@@ -0,0 +1,25 @@
+export { default as FilesIcon } from './files.svg'
+export { default as MarkdownIcon } from './markdown.svg'
+export { default as TailwindIcon } from './tailwind.svg'
+export { default as LinkIcon } from './link.svg'
+export { default as LightningIcon } from './lightning.svg'
+export { default as GlobeIcon } from './globe.svg'
+export { default as PictureIcon } from './picture.svg'
+export { default as CodeIcon } from './code.svg'
+export { default as BrushIcon } from './brush.svg'
+export { default as DropperIcon } from './dropper.svg'
+export { default as StarsIcon } from './stars.svg'
+export { default as FormulaIcon } from './formula.svg'
+export { default as WarningIcon } from './warning.svg'
+export { default as ChevronRightIcon } from './chevron-right.svg'
+export { default as BoxIcon } from './box.svg'
+export { default as GearIcon } from './gear.svg'
+export { default as RowsIcon } from './rows.svg'
+export { default as CardsIcon } from './cards.svg'
+export { default as OneIcon } from './one.svg'
+export { default as CloudIcon } from './cloud.svg'
+export { default as TableIcon } from './table.svg'
+export { default as FileIcon } from './file.svg'
+export { default as NewsletterIcon } from './newsletter.svg'
+export { default as ArrowRightIcon } from './arrow-right.svg'
+export { default as SwitchIcon } from './switch.svg'