Merge pull request #4 from oriverk/dev

perf: remove svg icon components and use css mask-image

Author: oriverk

public/assets/algolia.svg

@@ -1,11 +1,7 @@
 <script lang="ts">
   import urlJoin from 'url-join'
   import siteConfig from '../../site.config'
-  import GithubIcon from './ui/icons/GithubIcon.svelte'
-  import ZennIcon from './ui/icons/ZennIcon.svelte'
-  import XIcon from './ui/icons/X.svelte'
-  import PencilIcon from './ui/icons/PencilIcon.svelte'
-  import MagnifyingGlass from './ui/icons/MagnifyingGlass.svelte'
+  import Icon from './ui/Icon.svelte'
   import Search from './Search/index.svelte'
   import Dialog from './ui/Dialog.svelte'
 
@@ -36,36 +32,39 @@
   <h1>Kawano Yudai</h1>
   <p><span class="text-gradient">Agr.</span> → ? / Bicycle</p>
   <div class="links">
-    <button type="button" on:click={openDialog}>
-      <MagnifyingGlass title="Search" />
+    <button type="button" on:click={openDialog} title="Search">
+      <Icon type="magnifyingGlass" size="medium" />
       <span class="sr-only">Search</span>
     </button>
     <a href={blogPath} title="Blog" target="_blank" rel="noopener noreferrer">
-      <PencilIcon title="blog.oriverk.dev" />
+      <Icon type="pencil" size="medium" />
       <span class="sr-only">Blog link</span>
     </a>
     <a
       href={urlJoin('https://github.com', github)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + github}
     >
-      <GithubIcon title={'@' + github} />
+      <Icon type="github" size="medium" />
       <span class="sr-only">GitHub link</span>
     </a>
     <a
       href={urlJoin('https://twitter.com', x)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + x}
     >
-      <XIcon title={'@' + x} />
+      <Icon type="x" size="medium" />
       <span class="sr-only">X link</span>
     </a>
     <a
       href={urlJoin('https://zenn.dev', zenn)}
       target="_blank"
       rel="noopener noreferrer"
+      title={'@' + zenn}
     >
-      <ZennIcon title={'@' + zenn} />
+      <Icon type="zenn" size="medium" />
       <span class="sr-only">Zenn.dev link</span>
     </a>
   </div>
@@ -75,10 +74,6 @@
 </div>
 
 <style>
-  :global(.links svg) {
-    width: 2rem;
-    aspect-ratio: 1;
-  }
   .hero {
     display: flex;
     flex-direction: column;
@@ -114,7 +109,8 @@
     gap: 0.5rem;
   }
 
-  .links > * {
+  .links > a,
+  .links > button {
     width: 3rem;
     display: flex;
     justify-content: center;
@@ -125,7 +121,8 @@
     background-color: rgb(var(--color-hover));
   }
 
-  .links > *:hover {
+  .links > a:hover,
+  .links > button:hover {
     background-color: rgba(0 0 0 / 0.3);
   }
 </style>

src/components/ui/icons/GithubIcon.svelte renamed to public/assets/github.svg

@@ -1,8 +1,7 @@
 <script lang="ts">
   import type { Repository, Language } from '@octokit/graphql-schema'
   import Card from './ui/Card.svelte'
-  import StarIcon from './ui/icons/StarIcon.svelte'
-  import RepoIcon from './ui/icons/RepoIcon.svelte'
+  import Icon from './ui/Icon.svelte'
 
   interface $$Props
     extends Pick<
@@ -27,7 +26,7 @@
   <Card>
     <div class="repository">
       <div class="title">
-        <RepoIcon />
+        <Icon type="repository" size="small" />
         <span>{name}</span>
         {#if isArchived}
           <span class="public archived">Public archive</span>
@@ -48,7 +47,7 @@
         {/if}
         {#if !!stargazerCount}
           <span class="stargazerCount">
-            <StarIcon />
+            <Icon type="star" size="small" />
             {stargazerCount}
           </span>
         {/if}
@@ -58,11 +57,6 @@
 </a>
 
 <style>
-  :global(.repository svg) {
-    width: 1rem;
-    aspect-ratio: 1;
-    color: rgb(var(--color-lightgray));
-  }
   .repository {
     height: 100%;
     display: flex;

public/assets/magnifyingGlass.svg

@@ -3,12 +3,14 @@
 
   export let className: string = ''
   export let title: string = ''
+  export let height: string = ''
 </script>
 
 <svg
   viewBox="0 0 572 64"
   xmlns="http://www.w3.org/2000/svg"
   class={clsx('ais-PoweredBy-log', className)}
+  {height}
 >
   {#if title}
     <title>{title}</title>

public/assets/pencil.svg

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from 'svelte/elements'
   import clsx from 'clsx'
-  import MagnifyingGlass from '../ui/icons/MagnifyingGlass.svelte'
+  import Icon from '../ui/Icon.svelte'
 
   interface $$Props extends Omit<HTMLInputAttributes, 'class'> {
     className?: string
@@ -15,7 +15,7 @@
   <label for="search" class="sr-only">検索</label>
   <div class="search-input-wrapper">
     <div class="search-icon">
-      <MagnifyingGlass />
+      <Icon type="magnifyingGlass" size="small" />
     </div>
     <input class="search-input" {placeholder} bind:value {...$$restProps} />
   </div>
@@ -43,11 +43,6 @@
     align-items: center;
   }
 
-  .search-icon :global(svg) {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
   .search-input {
     color: rbg(var(--color-white));
     font-size: 1rem;

public/assets/repository.svg

@@ -5,7 +5,7 @@
   import { searchAlgolia } from '../../utils/algolia'
   import SearchInput from './SearchInput.svelte'
   import BlogHit from './BlogHit.svelte'
-  import AlgoliaIcon from '../ui/icons/AlgoliaIcon.svelte'
+  import AlgoliaIcon from './AlgoliaIcon.svelte'
 
   let results: SearchResponse<AlgoliaBlog>
   let hits: Hit<AlgoliaBlog>[] = []
@@ -88,7 +88,7 @@
       target="_blank"
       rel="noopener noreferrer"
     >
-      <AlgoliaIcon />
+      <AlgoliaIcon height="1.25rem" />
     </a>
   </div>
   {#if !results?.nbHits}
@@ -123,10 +123,6 @@
     justify-content: flex-end;
   }
 
-  .search-icon-wrapper :global(svg) {
-    height: 1.25rem;
-  }
-
   .search-results-wrapper {
     height: calc(100% - 9rem);
     overflow-y: auto;