feat: add the pnpm npm and yarn install commands (#190)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: hyjklmn

src/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     IconDetail: typeof import('./components/IconDetail.vue')['default']
     Icons: typeof import('./components/Icons.vue')['default']
     IconSet: typeof import('./components/IconSet.vue')['default']
+    InstallIconSet: typeof import('./components/InstallIconSet.vue')['default']
     Modal: typeof import('./components/Modal.vue')['default']
     ModalDialog: typeof import('./components/ModalDialog.vue')['default']
     Navbar: typeof import('./components/Navbar.vue')['default']

src/components/IconDetail.vue

@@ -5,6 +5,7 @@ import { activeMode, copyPreviewColor, getTransformedId, inBag, preferredCase, p
 import { Download } from '../utils/pack'
 import { dataUrlToBlob } from '../utils/dataUrlToBlob'
 import { idCases } from '../utils/case'
+import InstallIconSet from './InstallIconSet.vue'
 
 const props = defineProps({
   icon: {
@@ -122,20 +123,20 @@ const collection = computed(() => {
     </div>
     <div class="px-6 py-2 mb-2 md:px-2 md:py-4">
       <button
-        class="text-gray-500 hover:text-primary text-sm dark:text-dark-500 !outline-none"
+        class="op35 hover:text-primary hover:op100 text-sm !outline-none"
         @click="showHelp = !showHelp"
       >
         How to use the icon?
       </button>
-      <div class="flex text-gray-700 relative font-mono dark:text-dark-900">
+      <div class="flex op75 relative font-mono">
         {{ transformedId }}
         <IconButton icon="carbon:copy" class="ml-2" @click="copy('id')" />
         <IconButton icon="carbon:chevron-up" class="ml-2" @click="showCaseSelect = !showCaseSelect" />
         <div class="flex-auto" />
         <div
           v-if="showCaseSelect"
           ref="caseSelector"
-          class="absolute left-0 bottom-1.8em text-sm rounded shadow p-2 bg-white dark:bg-dark-100 dark:border dark:border-dark-200"
+          class="absolute left-0 bottom-1.8em text-sm rounded shadow p-2 bg-base dark:border dark:border-dark-200"
         >
           <div
             v-for="[k, v] of Object.entries(idCases)"
@@ -162,7 +163,7 @@ const collection = computed(() => {
         >{{ collection.license.title }}</a>
       </div>
 
-      <p v-if="showCollection && collection" class="flex mb-1 text-gray-500 text-sm">
+      <p v-if="showCollection && collection" class="flex mb-1 op50 text-sm">
         Collection:
         <RouterLink
           class="ml-1 text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
@@ -178,7 +179,7 @@ const collection = computed(() => {
             inline-block leading-1em border border-base my-2 mr-2 font-sans pl-2 pr-3 py-1 rounded-full text-sm cursor-pointer
             hover:bg-gray-50 dark:hover:bg-dark-200
           "
-          :class="inBag(icon) ? 'text-primary' : 'text-gray-500'"
+          :class="inBag(icon) ? 'text-primary' : 'op50'"
           @click="toggleBag(icon)"
         >
           <template v-if="inBag(icon)">
@@ -197,7 +198,7 @@ const collection = computed(() => {
             inline-block leading-1em border border-base my-2 mr-2 font-sans pl-2 pr-3 py-1 rounded-full text-sm cursor-pointer
             hover:bg-gray-50 dark:hover:bg-dark-200
           "
-          :class="activeMode === 'select' ? 'text-primary' : 'text-gray-500'"
+          :class="activeMode === 'select' ? 'text-primary' : 'op50'"
           @click="toggleSelectingMode"
         >
           <Icon class="inline-block text-lg align-middle" icon="carbon:list-checked" />
@@ -209,7 +210,7 @@ const collection = computed(() => {
             inline-block leading-1em border border-base my-2 mr-2 font-sans pl-2 pr-3 py-1 rounded-full text-sm cursor-pointer
             hover:bg-gray-50 dark:hover:bg-dark-200
           "
-          :class="copyPreviewColor ? 'text-primary' : 'text-gray-500'"
+          :class="copyPreviewColor ? 'text-primary' : 'op50'"
           @click="copyPreviewColor = !copyPreviewColor"
         >
           <Icon v-if="!copyPreviewColor" class="inline-block text-lg align-middle" icon="carbon:checkbox" />
@@ -220,7 +221,7 @@ const collection = computed(() => {
 
       <div class="flex flex-wrap mt-2">
         <div class="mr-4">
-          <div class="my-1 text-gray-500 text-sm">
+          <div class="my-1 op50 text-sm">
             Snippets
           </div>
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('svg')">
@@ -240,7 +241,7 @@ const collection = computed(() => {
           </button>
         </div>
         <div class="mr-4">
-          <div class="my-1 text-gray-500 text-sm">
+          <div class="my-1 op50 text-sm">
             Components
           </div>
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('vue')">
@@ -275,7 +276,7 @@ const collection = computed(() => {
           </button>
         </div>
         <div class="mr-4">
-          <div class="my-1 text-gray-500 text-sm">
+          <div class="my-1 op50 text-sm">
             Links
           </div>
           <button class="btn small mr-1 mb-1 opacity-75" @click="copy('url')">
@@ -286,7 +287,7 @@ const collection = computed(() => {
           </button>
         </div>
         <div class="mr-4">
-          <div class="my-1 text-gray-500 text-sm">
+          <div class="my-1 op50 text-sm">
             Download
           </div>
           <button class="btn small mr-1 mb-1 opacity-75" @click="download('svg')">
@@ -321,7 +322,7 @@ const collection = computed(() => {
           </button>
         </div>
         <div class="mr-4">
-          <div class="my-1 text-gray-500 text-sm">
+          <div class="my-1 op50 text-sm">
             View on
           </div>
           <a
@@ -342,8 +343,8 @@ const collection = computed(() => {
           </a>
         </div>
       </div>
+
+      <InstallIconSet v-if="collection" :collection="collection" />
     </div>
   </div>
 </template>
-../utils/copyPng
-../utils/svgToPng

src/components/InstallIconSet.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { ref } from 'vue'
+import type { CollectionMeta } from '../data'
+import { selectedPackageManager } from '../store'
+
+const props = defineProps({
+  collection: {
+    type: Object as PropType<CollectionMeta>,
+    required: true,
+  },
+})
+
+const managers = ['pnpm', 'npm', 'yarn', 'bun'] as const
+
+const icons = {
+  npm: 'i-logos:npm-icon',
+  pnpm: 'i-logos:pnpm',
+  yarn: 'i-logos:yarn',
+  bun: 'i-logos:bun',
+}
+
+function selectManager(packageName: string) {
+  selectedPackageManager.value = packageName
+}
+
+const status = ref(false)
+
+async function copyText() {
+  const text = `${selectedPackageManager.value} ${selectedPackageManager.value !== 'npm' ? 'add' : 'i'} -D @iconify-json/${props.collection.id}`
+  status.value = true
+  setTimeout(() => {
+    status.value = false
+  }, 2000)
+
+  if (text) {
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+    catch {}
+  }
+  return false
+}
+</script>
+
+<template>
+  <div lt-md:hidden>
+    <a
+      href="https://iconify.design/docs/icons/json.html" target="_blank"
+      class="my-1 text-sm mt6 block op50 hover:op100 hover:text-primary"
+    >
+      Install Iconify Iconset
+    </a>
+    <div class="border-1 border-base rounded w-100 mt1">
+      <div flex="~ gap-4 items-center" p3 border="b base">
+        <label
+          v-for="manager in managers" :key="manager"
+          flex="~ items-center gap-2"
+          :class="[manager === selectedPackageManager ? 'op100' : 'op25']"
+          @change="selectManager(manager)"
+        >
+          <input type="radio" name="manager" :value="manager" hidden>
+          <div :class="icons[manager]" />
+          <div mt--1>{{ manager }}</div>
+        </label>
+      </div>
+
+      <div flex="~ gap-2 items-center" p3>
+        <code flex-auto>
+          <span style="color:#80A665;">{{ selectedPackageManager }}</span>
+          <span style="color:#DBD7CAEE;" />
+          <span style="color:#B8A965;">{{ selectedPackageManager !== 'npm' ? ' add ' : ' i ' }} -D </span>
+          <span style="color:#DBD7CAEE;" /><span style="color:#DBD7CAEE;" />
+          <span style="color:#C98A7D;">@iconify-json/{{ props.collection.id }}</span>
+        </code>
+        <IconButton icon="carbon:copy" @click="copyText" />
+      </div>
+      <Notification :value="status">
+        <Icon icon="mdi:check" class="inline-block mr-2 font-xl align-middle" />
+        <span class="align-middle">Copied</span>
+      </Notification>
+    </div>
+  </div>
+</template>

src/components/Notification.vue

@@ -12,8 +12,9 @@ withDefaults(
   >
     <div
       class="
-        px-4 py-1 rounded bg-white inline-block m-3 transition-all duration-300 text-primary border
-        dark:bg-dark-100 dark:border-dark-300
+        px-3 py-1 rounded inline-block m-3 transition-all duration-300 text-primary
+        bg-base border border-base
+        flex flex-inline items-center
       "
       :style="value ? {} : { transform: 'translateY(-150%)' }"
       :class="value ? 'shadow' : 'shadow-none'"

src/store/localstorage.ts

@@ -19,6 +19,7 @@ export const bags = useStorage<string[]>('icones-bags', [])
 export const activeMode = useStorage<ActiveMode>('active-mode', 'normal')
 export const preferredCase = useStorage<IdCase>('icones-preferfed-case', 'iconify')
 export const drawerCollapsed = useStorage<boolean>('icones-drawer-collapsed', false)
+export const selectedPackageManager = useStorage<string>('icones-package-manager', 'pnpm')
 
 export const excludedCollectionIds = useStorage<string[]>('icones-excluded-collections', [])
 export const excludedCategories = useStorage<string[]>('icones-excluded-categories', [

unocss.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDir
 
 export default defineConfig({
   shortcuts: {
-    'border-base': 'border-gray-200 dark:border-dark-100',
+    'border-base': 'border-hex-888/15',
     'border-dark-only': 'border-transparent dark:border-dark-100',
     'bg-base': 'bg-white dark:bg-[#181818]',
     'color-base': 'text-gray-900 dark:text-gray-300',