chore: expose online links for examples in StackBlitz (#315)

README.md

@@ -19,11 +19,11 @@ Access thousands of icons as components **on-demand** universally.
 - 🦾 TypeScript support.
 - 🔍 [Browse Icons](https://icones.js.org/)
 
-<table><td><br>
+<table><tr><td><br>
 
 &nbsp;&nbsp;&nbsp;💡 **Story behind this tool**: [Journey with Icons Continues](https://antfu.me/posts/journey-with-icons-continues) - a blog post by Anthony&nbsp;&nbsp;&nbsp;
 
-</td></table>
+</td></tr></table>
 
 > **`vite-plugin-icons` has been renamed to `unplugin-icons`**, see the [migration guide](#migrate-from-vite-plugin-icons)
 
@@ -103,6 +103,12 @@ Icons({
 
 It will install the icon set when you import them. The right package manager will be auto-detected (`npm`, `yarn` or `pnpm`).
 
+## Examples
+
+You can play online with the examples in this repo in StackBlitz, see [playgrounds page](./examples/README.md).
+
+Fork any of the online examples and reproduce the issue you're facing, then share the link with us.
+
 ## Configuration
 
 ###### Build Tools

examples/README.md

@@ -0,0 +1,19 @@
+# Examples
+
+| Example                 | Source                                                                                      | Playground                                                                                                |
+|-------------------------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|
+| `Astro`                 | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro)               | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro)        |
+| `Next`                  | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next)                | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next)         |
+| `Nuxt 3`                | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt3)               | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt3)        |
+| `SvelteKit`             | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit)           | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit)    |
+| `Preact (Vite)`         | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-preact)         | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-preact)  |
+| `Qwik (Vite)`           | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-qwik)           | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-qwik)    |
+| `React (Vite)`          | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-react)          | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-react)   |
+| `Solid (Vite)`          | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-solid)          | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-solid)   |
+| `Svelte (Vite)`         | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-svelte)         | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-svelte)  |
+| `VanillaJS (Vite)`      | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vanilla)        | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) |
+| `Vue2 (Vite)`           | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue2)           | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue2)    |
+| `Vue3 (Vite)`           | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3)           | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3)    |
+| `Vue3 legacy (Vite)`    | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy)    | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy)    |
+| `Web Components (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-web-components)    |
+| `Vue2 (Vue CLI)`        | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2)        | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2)    |

examples/astro/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/astro/package.json

@@ -1,6 +1,8 @@
 {
+  "name": "astro-example",
   "type": "module",
   "version": "0.0.1",
+  "description": "unplugin-icons + Astro",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -15,5 +17,9 @@
   "devDependencies": {
     "@iconify/json": "^2.2.110",
     "unplugin-icons": "workspace:*"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/next/.stackblitz.js

@@ -0,0 +1,15 @@
+const { promises } = require('node:fs')
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await promises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await promises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/next/package.json

@@ -1,5 +1,6 @@
 {
   "name": "next-example",
+  "description": "unplugin-icons + Next",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,9 +15,14 @@
   "devDependencies": {
     "@iconify/json": "2.2.110",
     "@svgr/core": "8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
     "typescript": "5.2.2",
     "unplugin-icons": "workspace:*"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/nuxt3/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('link:../..', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/nuxt3/package.json

@@ -1,4 +1,7 @@
 {
+  "name": "nuxt3-example",
+  "description": "unplugin-icons + Nuxt 3",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "nuxt build",
@@ -11,5 +14,9 @@
     "@iconify-json/mdi": "^1.1.54",
     "nuxt": "^3.7.0",
     "unplugin-icons": "link:../.."
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/sveltekit/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/sveltekit/package.json

@@ -1,5 +1,7 @@
 {
+  "name": "sveltekit-example",
   "type": "module",
+  "description": "unplugin-icons + SvelteKit",
   "private": true,
   "scripts": {
     "build": "vite build",
@@ -18,5 +20,9 @@
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "unplugin-icons": "workspace:*"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/vite-preact/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/vite-preact/package.json

@@ -1,5 +1,7 @@
 {
-  "name": "vite-preact-icon-set",
+  "name": "vite-preact-example",
+  "description": "unplugin-icons + Preact (Vite)",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -14,9 +16,14 @@
     "@iconify-json/logos": "^1.1.35",
     "@preact/preset-vite": "^2.5.0",
     "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "typescript": "^5.2.2",
     "unplugin-icons": "workspace:*",
     "vite": "^4.4.9",
     "vite-plugin-inspect": "^0.7.38"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/vite-qwik/.stackblitz.js

@@ -0,0 +1,18 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents
+      .replace('workspace:*', 'latest')
+      .replace('"eslint": "8.48.0",', '"eslint": "8.45.0",')
+      .replace('"eslint-plugin-qwik": "1.2.10",', '"eslint-plugin-qwik": "1.2.11",')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/vite-qwik/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "vite-qwik-example",
+  "description": "unplugin-icons + Qwik (Vite)",
   "type": "module",
   "private": true,
   "scripts": {
@@ -15,6 +17,7 @@
   },
   "devDependencies": {
     "@builder.io/qwik": "1.2.10",
+    "@svgx/core": "^1.0.1",
     "@types/eslint": "8.44.2",
     "@types/node": "^20.5.9",
     "@types/node-fetch": "latest",
@@ -29,5 +32,9 @@
     "unplugin-icons": "workspace:*",
     "vite": "4.4.9",
     "vite-tsconfig-paths": "4.2.0"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/vite-qwik/src/root.tsx

@@ -2,13 +2,13 @@ import App from './app'
 
 export default () => {
   return (
-    <body>
+    <>
       <head>
-        <title> Qwik With Icons </title>
+        <title>Qwik With Icons </title>
       </head>
       <body>
         <App />
       </body>
-    </body>
+    </>
   )
 }

examples/vite-react/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/vite-react/package.json

@@ -1,5 +1,7 @@
 {
-  "name": "vite-react-icon-set",
+  "name": "vite-react-example",
+  "description": "unplugin-icons + React (Vite)",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -14,12 +16,17 @@
   "devDependencies": {
     "@iconify-json/logos": "^1.1.35",
     "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "typescript": "^5.2.2",
     "unplugin-icons": "workspace:*",
     "vite": "^4.4.9",
     "vite-plugin-inspect": "^0.7.38"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/vite-solid/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}

examples/vite-solid/package.json

@@ -1,5 +1,7 @@
 {
-  "name": "vite-template-solid-icon-set",
+  "name": "vite-solid-example",
+  "description": "unplugin-icons + Solid (Vite)",
+  "type": "module",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -13,8 +15,14 @@
   },
   "devDependencies": {
     "@iconify-json/logos": "^1.1.35",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "unplugin-icons": "workspace:*",
     "vite": "^4.4.9",
     "vite-plugin-solid": "^2.7.0"
+  },
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "node .stackblitz.js && npm install && npm run dev"
   }
 }

examples/vite-svelte/.stackblitz.js

@@ -0,0 +1,15 @@
+import { promises as fsPromises } from 'node:fs'
+
+updatePackageJson()
+
+async function updatePackageJson() {
+  const filename = './package.json'
+  try {
+    const contents = await fsPromises.readFile(filename, 'utf-8')
+    const updatedContent = contents.replace('workspace:*', 'latest')
+    await fsPromises.writeFile(filename, updatedContent)
+  }
+  catch (err) {
+    console.error(err)
+  }
+}