refactor: Custom icons (snapshot-labs/sx-ui#864)

* fix: Custom icons

* fix: Use link color for more visibility on light mode

* Update src/views/Home.vue

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>

* Update src/views/Home.vue

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>

* fix: Revert changes

* fix: Size consistency using em

* fix: Use link color

* fix: Use larger em value

* fix: Use hard coded 20px again

---------

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>

apps/ui/src/views/Home.vue

@@ -1,7 +1,25 @@
 <script setup lang="ts">
 import { version, repository } from '@/../package.json';
+import ICX from '~icons/c/x';
+import ICDiscord from '~icons/c/discord';
+import ICGithub from '~icons/c/github';
 
 const COMMIT_SHA = import.meta.env.VITE_COMMIT_SHA || '';
+
+const SOCIALS = [
+  {
+    href: 'https://twitter.com/SnapshotLabs',
+    icon: ICX
+  },
+  {
+    href: 'https://discord.gg/snapshot',
+    icon: ICDiscord
+  },
+  {
+    href: 'https://github.com/snapshot-labs',
+    icon: ICGithub
+  }
+];
 </script>
 
 <template>
@@ -54,15 +72,15 @@ const COMMIT_SHA = import.meta.env.VITE_COMMIT_SHA || '';
       </div>
       <div class="space-y-2">
         <div class="eyebrow">Join the community</div>
-        <div class="space-x-2">
-          <a href="https://twitter.com/SnapshotLabs" target="_blank">
-            <img src="~@/assets/x.svg" class="w-[32px] h-[32px] inline-block" />
-          </a>
-          <a href="https://discord.gg/snapshot" target="_blank">
-            <img src="~@/assets/discord.svg" class="w-[32px] h-[32px] inline-block" />
-          </a>
-          <a href="https://github.com/snapshot-labs" target="_blank">
-            <img src="~@/assets/github.svg" class="w-[32px] h-[32px] inline-block" />
+        <div class="flex space-x-2">
+          <a
+            v-for="social in SOCIALS"
+            :key="social.href"
+            :href="social.href"
+            target="_blank"
+            class="text-[#606060] hover:text-skin-link"
+          >
+            <component :is="social.icon" class="w-[32px] h-[32px]" />
           </a>
         </div>
       </div>

apps/ui/src/views/Space/Overview.vue

@@ -2,6 +2,10 @@
 import { _n, compareAddresses, sanitizeUrl } from '@/helpers/utils';
 import { getNetwork, offchainNetworks } from '@/networks';
 import { Space } from '@/types';
+import ICX from '~icons/c/x';
+import ICDiscord from '~icons/c/discord';
+import ICGithub from '~icons/c/github';
+import IHGlobeAlt from '~icons/heroicons-outline/globe-alt';
 
 const PROPOSALS_LIMIT = 4;
 
@@ -35,6 +39,13 @@ const githubUrl = computed(() =>
   props.space.github ? sanitizeUrl(`https://github.com/${props.space.github}`) : null
 );
 
+const socials = computed(() => [
+  { href: externalUrl.value, icon: IHGlobeAlt },
+  { href: twitterUrl.value, icon: ICX },
+  { href: discordUrl.value, icon: ICDiscord },
+  { href: githubUrl.value, icon: ICGithub }
+]);
+
 const proposalsRecord = computed(() => proposalsStore.proposals[spaceIdComposite]);
 
 watchEffect(() => setTitle(props.space.name));
@@ -92,19 +103,17 @@ watchEffect(() => setTitle(props.space.name));
             {{ space.about }}
           </span>
         </div>
-        <div class="space-x-2">
-          <a v-if="externalUrl" :href="externalUrl" target="_blank">
-            <IH-globe-alt class="w-[26px] h-[26px] inline-block text-[#606060]" />
-          </a>
-          <a v-if="twitterUrl" :href="twitterUrl" target="_blank">
-            <img src="~@/assets/x.svg" class="w-[26px] h-[26px] inline-block" />
-          </a>
-          <a v-if="discordUrl" :href="discordUrl" target="_blank">
-            <img src="~@/assets/discord.svg" class="w-[26px] h-[26px] inline-block" />
-          </a>
-          <a v-if="githubUrl" :href="githubUrl" target="_blank">
-            <img src="~@/assets/github.svg" class="w-[26px] h-[26px] inline-block" />
-          </a>
+        <div class="space-x-2 flex">
+          <span v-for="(social, i) in socials" :key="i">
+            <a
+              v-if="social.href"
+              :href="social.href"
+              target="_blank"
+              class="text-[#606060] hover:text-skin-link"
+            >
+              <component :is="social.icon" class="w-[26px] h-[26px]" />
+            </a>
+          </span>
         </div>
       </div>
     </div>

apps/ui/vite.config.ts

@@ -5,6 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import visualizer from 'rollup-plugin-visualizer';
 import inject from '@rollup/plugin-inject';
 
@@ -30,6 +31,7 @@ export default defineConfig({
       directoryAsNamespace: true,
       resolvers: [
         IconsResolver({
+          customCollections: ['c'],
           alias: {
             h: 'heroicons-outline',
             s: 'heroicons-solid'
@@ -47,6 +49,11 @@ export default defineConfig({
       iconCustomizer(collection, icon, props) {
         props.width = '20px';
         props.height = '20px';
+      },
+      customCollections: {
+        c: FileSystemIconLoader('./src/assets/icons', svg =>
+          svg.replace(/^<svg /, '<svg fill="currentColor" ')
+        )
       }
     })
   ],