feat: add shadows to icons cuz i can

Rettend · Rettend · commit 2bab3afb8da2 · 2023-05-26T21:47:58.000+02:00
diff --git a/package.json b/package.json
@@ -49,12 +49,14 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.6",
     "@iconify-json/ph": "^1.1.5",
+    "@iconify/utils": "^2.1.5",
     "@types/dompurify": "^3.0.2",
     "@types/node": "^20.1.4",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vueuse/core": "^10.1.2",
     "bumpp": "^9.1.0",
     "eslint": "^8.40.0",
+    "icon-shadow": "^1.0.5",
     "typescript": "^5.0.4",
     "unbuild": "^1.2.1",
     "unocss": "^0.52.3",
diff --git a/playground/public/PhInfoBold.svg b/playground/public/PhInfoBold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M108 84a16 16 0 1 1 16 16a16 16 0 0 1-16-16Zm128 44A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108Zm-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84Zm-72 36.68V132a20 20 0 0 0-20-20a12 12 0 0 0-4 23.32V168a20 20 0 0 0 20 20a12 12 0 0 0 4-23.32Z"/></svg>
diff --git a/playground/public/PhMoonBold.svg b/playground/public/PhMoonBold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M236.37 139.4a12 12 0 0 0-12-3A84.07 84.07 0 0 1 119.6 31.59a12 12 0 0 0-15-15a108.86 108.86 0 0 0-54.91 38.48A108 108 0 0 0 136 228a107.09 107.09 0 0 0 64.93-21.69a108.86 108.86 0 0 0 38.44-54.94a12 12 0 0 0-3-11.97Zm-49.88 47.74A84 84 0 0 1 68.86 69.51a84.93 84.93 0 0 1 23.41-21.22Q92 52.13 92 56a108.12 108.12 0 0 0 108 108q3.87 0 7.71-.27a84.79 84.79 0 0 1-21.22 23.41Z"/></svg>
diff --git a/playground/public/PhSunBold.svg b/playground/public/PhSunBold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M116 32V16a12 12 0 0 1 24 0v16a12 12 0 0 1-24 0Zm80 96a68 68 0 1 1-68-68a68.07 68.07 0 0 1 68 68Zm-24 0a44 44 0 1 0-44 44a44.05 44.05 0 0 0 44-44ZM51.51 68.49a12 12 0 1 0 17-17l-12-12a12 12 0 0 0-17 17Zm0 119l-12 12a12 12 0 0 0 17 17l12-12a12 12 0 1 0-17-17ZM196 72a12 12 0 0 0 8.49-3.51l12-12a12 12 0 0 0-17-17l-12 12A12 12 0 0 0 196 72Zm8.49 115.51a12 12 0 0 0-17 17l12 12a12 12 0 0 0 17-17ZM44 128a12 12 0 0 0-12-12H16a12 12 0 0 0 0 24h16a12 12 0 0 0 12-12Zm84 84a12 12 0 0 0-12 12v16a12 12 0 0 0 24 0v-16a12 12 0 0 0-12-12Zm112-96h-16a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24Z"/></svg>
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -115,12 +115,12 @@ function handleEnter(e: KeyboardEvent, index: number) {
       <div>
         <h1>TextStyler Playground</h1>
         <div flex="~ row" gap-2 items-center>
-          <div i-ph-info-bold w-6 h-6 text-blue-6 />
+          <div i-shadow:ph-info-bold w-8 h-8 text-blue-6 />
           Change the inputs' values and the styling will be updated.
         </div>
       </div>
       <div
-        w-8 h-8 cursor-pointer mt-6 text-red-6 dark:text-red-5 :class="isDark ? 'i-ph-moon-bold' : 'i-ph-sun-bold'"
+        w-10 h-10 cursor-pointer mt-6 text-red-6 dark:text-red-5 :class="isDark ? 'i-shadow:ph-moon-bold md:mr-2' : 'i-shadow:ph-sun-bold'"
         @click="toggleDark()"
       />
     </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/uno.config.ts b/uno.config.ts
@@ -1,10 +1,23 @@
 import { defineConfig, presetAttributify, presetIcons, presetUno, presetWebFonts, transformerDirectives } from 'unocss'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import { insertShadow } from 'icon-shadow'
 
 export default defineConfig({
   presets: [
     presetUno(),
     presetAttributify(),
-    presetIcons(),
+    presetIcons({
+      collections: {
+        shadow: FileSystemIconLoader(
+          './playground/public',
+          svg => insertShadow(svg, {
+            stdDeviation: 2,
+            opacity: 0.3,
+            viewBoxScale: 1.5,
+          }),
+        ),
+      },
+    }),
     presetWebFonts({
       fonts: {
         sans: 'Ubuntu',
