⚒️ Add .slug.

src/components/search.tsx

@@ -44,7 +44,7 @@ const Search = () => {
                 borderWidth="1px"
                 borderRadius="5px"
               >
-                <Image width="20px" mr="2" src={item.href} alt={item.title} />
+                <Image width="20px" mr="2" src={item.slug} alt={item.title} />
                 <Text>{item.title}</Text>
               </Flex>
             </CustomLink>

src/components/svgInfo.tsx

@@ -49,7 +49,7 @@ const SVGInfo = (props: SVGCardProps) => {
       borderRadius="10px"
     >
       <Image
-        src={props.href}
+        src={props.slug}
         alt={props.title}
         fit="cover"
         loading="lazy"
@@ -63,7 +63,7 @@ const SVGInfo = (props: SVGCardProps) => {
           variant="ghost"
           borderWidth="1px"
           leftIcon={<Copy />}
-          onClick={() => copyToClipboard(props.href)}
+          onClick={() => copyToClipboard(props.slug)}
         >
           Copy to clipboard
         </Button>
@@ -72,7 +72,7 @@ const SVGInfo = (props: SVGCardProps) => {
           leftIcon={<DownloadSimple />}
           variant="primary"
           mr="2"
-          onClick={() => downloadSvg(props.href)}
+          onClick={() => downloadSvg(props.slug)}
         >
           Download .svg
         </Button>

src/interfaces/components.ts

@@ -18,7 +18,7 @@ export interface SVGCardProps {
   id: number;
   svg: string;
   title: string;
-  href?: string;
+  slug?: string;
   url?: string;
 }
 

src/interfaces/svgData.ts

@@ -1,6 +1,6 @@
 export interface SvgData {
   id: number;
-  href: string;
+  slug: string;
   title: string;
   category: string;
   categories?: string[];

src/pages/index.tsx

@@ -19,7 +19,7 @@ const Home: NextPage = () => {
   return (
     <Grid>
       {data.map((svg: SvgData) => (
-        <SVGCard key={svg.id} id={svg.id} svg={svg.href} title={svg.title} />
+        <SVGCard key={svg.id} id={svg.id} svg={svg.slug} title={svg.title} />
       ))}
     </Grid>
   );