Merge pull request #194 from traPtitech/feat/atcoderLogo

AtCoderのロゴ表示に対応

src/components/User/AccountListItem.vue

@@ -1,24 +1,36 @@
 <script lang="ts" setup>
 import AIcon from '/@/components/UI/AIcon.vue'
 import { Account } from '/@/lib/apis'
-import { services } from '/@/consts/services'
+import { Service, services } from '/@/consts/services'
+import { computed } from 'vue'
 
 interface Props {
   account: Account
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const service = computed<Service | undefined>(() =>
+  services.get(props.account.type)
+)
 </script>
 
 <template>
-  <li>
+  <li v-if="service !== undefined">
     <a
       :class="$style.link"
       :href="account.url"
       target="_blank"
       rel="noreferrer noopener"
     >
-      <a-icon :name="services.get(account.type)?.icon ?? ''" :size="24" />
+      <img
+        v-if="service.notIcon"
+        :alt="service.name"
+        :src="service.icon"
+        width="24"
+        height="24"
+      />
+      <a-icon v-else :name="service.icon ?? ''" :size="24" />
     </a>
   </li>
 </template>

src/consts/services.ts

@@ -1,8 +1,10 @@
 import { AccountType } from '/@/lib/apis'
+import AtCoder from '/@/assets/AtCoder.png'
 
-interface Service {
+export interface Service {
   name: string
   icon: string
+  notIcon?: boolean
 }
 export interface ServiceWithType extends Service {
   type: AccountType
@@ -71,7 +73,8 @@ export const services: ServiceRecord = new Map([
     AccountType.atcoder,
     {
       name: 'AtCoder',
-      icon: 'atcoder' //アイコンは保留
+      icon: AtCoder,
+      notIcon: true
     }
   ],
   [

src/types/shims-png.d.ts

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