Merge pull request #264 from traPtitech/feat/update_iconify

iconify周りをupdate

Author: mehm8128

package-lock.json

@@ -15,7 +15,6 @@
     "start-mock": "prism mock -p 4010 -d https://raw.githubusercontent.com/traPtitech/traPortfolio/main/docs/swagger/traPortfolio.v1.yaml"
   },
   "dependencies": {
-    "@iconify/iconify": "^3.1.1",
     "autosize": "^6.0.1",
     "axios": "^1.6.8",
     "pinia": "^2.1.7",
@@ -26,7 +25,7 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.224",
+    "@iconify/vue": "^4.1.2",
     "@stoplight/prism-cli": "^5.8.1",
     "@types/autosize": "^4.0.3",
     "@types/jest": "^29.5.12",
@@ -45,7 +44,6 @@
     "ts-morph": "^23.0.0",
     "typescript": "^5.5.3",
     "vite": "^5.3.2",
-    "vite-plugin-purge-icons": "^0.10.0",
     "vitest": "^1.6.0",
     "vue-tsc": "2.0.24"
   },

package.json

@@ -33,8 +33,8 @@ const handleInput = (event: Event) => {
 
 <template>
   <div :class="$style.container" :data-has-anchor="props.hasAnchor">
-    <div v-if="typeof props.icon !== 'undefined'" :class="$style.iconContainer">
-      <icon :name="`mdi:${props.icon}`" :icon="$style.icon" />
+    <div v-if="props.icon !== undefined" :class="$style.iconContainer">
+      <icon :name="`mdi:${props.icon}`" />
     </div>
     <input
       :class="$style.input"

src/assets/AtCoder.png

@@ -1,25 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
 
 interface Props {
   name: string
   size?: number
 }
-const props = withDefaults(defineProps<Props>(), { size: 24 })
-
-const styles = computed(() => ({
-  height: `${props.size}px`,
-  width: `${props.size}px`
-}))
+withDefaults(defineProps<Props>(), { size: 24 })
 </script>
 
 <template>
-  <span
-    class="iconify"
-    :data-icon="name"
-    :style="styles"
-    :class="$style.icon"
-  />
+  <icon :icon="name" :height="size" :width="size" :class="$style.icon" />
 </template>
 
 <style lang="scss" module>

src/assets/AtCoder.svg

@@ -39,7 +39,15 @@ const shownServices = computed((): Service[] =>
       :class="$style.anchor"
       :data-has-account="service.url !== null"
     >
-      <icon :name="service.icon" :class="$style.icon" />
+      <img
+        v-if="service.notIcon"
+        :alt="service.name"
+        :src="service.icon"
+        :class="$style.icon"
+        width="24"
+        height="24"
+      />
+      <icon v-else :name="service.icon" :class="$style.icon" />
     </a>
   </div>
 </template>

src/components/UI/FormInput.vue

@@ -1,9 +1,11 @@
 import { deepFreeze } from '/@/lib/deepFreeze'
 import { AccountType } from '/@/lib/apis'
+import AtCoder from '/@/assets/AtCoder.png'
 
 export interface Service<Type extends AccountType = AccountType> {
   icon: string
   type: Type
+  notIcon?: boolean
 }
 
 export interface ServiceWithName<Type extends AccountType = AccountType>
@@ -66,8 +68,9 @@ export const services = deepFreeze({
     type: AccountType.zenn
   },
   AtCoder: {
-    icon: 'atcoder', //アイコンは保留
-    type: AccountType.atcoder
+    icon: AtCoder,
+    type: AccountType.atcoder,
+    notIcon: true
   },
   SoundCloud: {
     icon: 'mdi:soundcloud',

src/components/UI/Icon.vue

@@ -7,7 +7,6 @@ import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
 import './index.scss'
-import '@purge-icons/generated'
 
 const pinia = createPinia()
 const app = createApp(App)

src/components/User/UserAccounts.vue

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: string
+  export default content
+}