├── .npmrc
├── tsconfig.json
├── docs
    ├── app
    │   ├── components
    │   │   ├── content
    │   │   │   └── IconCount.vue
    │   │   └── IconSlide.vue
    │   ├── pages
    │   │   └── index.vue
    │   └── app.config.ts
    ├── tsconfig.json
    ├── .gitignore
    ├── content.config.ts
    ├── package.json
    ├── nuxt.config.ts
    ├── public
    │   └── favicon.svg
    └── content
    │   └── get-started.md
├── playground
    ├── nuxt.config.ts
    ├── app
    │   └── app.vue
    ├── package.json
    └── tsconfig.json
├── pnpm-workspace.yaml
├── .editorconfig
├── .release-it.json
├── src
    ├── runtime
    │   ├── utils
    │   │   └── icons.ts
    │   └── components
    │   │   └── PhosphorIcon.vue
    └── module.ts
├── eslint.config.mjs
├── .vscode
    └── settings.json
├── .gitignore
├── package.json
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 |   "exclude": ["dist", "node_modules", "docs"]
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/app/components/content/IconCount.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <ProseCode>{{ getIconList().length }}</ProseCode>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | export default defineNuxtConfig({
2 |   compatibilityDate: '2025-07-15',
3 |   devtools: { enabled: true },
4 |   modules: ['../src/module'],
5 | })
6 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
 1 | packages:
 2 |   - docs
 3 |   - playground
 4 | 
 5 | onlyBuiltDependencies:
 6 |   - "@parcel/watcher"
 7 |   - "@tailwindcss/oxide"
 8 |   - better-sqlite3
 9 |   - esbuild
10 |   - unrs-resolver
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_size = 2
 5 | indent_style = space
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/playground/app/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <PhosphorIcon name="acorn" />
4 | 
5 |     <!-- All the keys should be preloaded even though only one is truthy -->
6 |     <PhosphorIcon :name="{ 'sun': true, 'moon-stars': false }" />
7 |   </div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/release-it@19/schema/release-it.json",
 3 |   "git": {
 4 |     "commitMessage": "chore: 🧹 release v${version}"
 5 |   },
 6 |   "github": {
 7 |     "release": true,
 8 |     "releaseName": "v${version}"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/src/runtime/utils/icons.ts:
--------------------------------------------------------------------------------
1 | // @ts-expect-error Module resolution issues
2 | import iconMap from '#phosphor-icons/map'
3 | import type { PhosphorIconName } from '#phosphor-icons/types'
4 | 
5 | export const getIconList = () => Object.keys(iconMap) as PhosphorIconName[]
6 | 
7 | export const getIconMap = (): Record<PhosphorIconName, string> => iconMap
8 | 


--------------------------------------------------------------------------------
/docs/content.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineContentConfig, defineCollection, z } from '@nuxt/content'
 2 | 
 3 | export default defineContentConfig({
 4 |   collections: {
 5 |     content: defineCollection({
 6 |       type: 'page',
 7 |       source: '**/*.md',
 8 |       schema: z.object({
 9 |         displayToc: z.boolean().default(false),
10 |       }),
11 |     }),
12 |   },
13 | })
14 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview"
 9 |   },
10 |   "dependencies": {
11 |     "@nuxt/content": "3.7.0",
12 |     "nuxt": "^4.1.2",
13 |     "vue": "^3.5.21",
14 |     "vue-router": "^4.5.1"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "playground",
 3 |   "type": "module",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview"
10 |   },
11 |   "dependencies": {
12 |     "nuxt": "^4.1.2",
13 |     "vue": "^3.5.21",
14 |     "vue-router": "^4.5.1"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/playground/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "files": [],
 4 |   "references": [
 5 |     {
 6 |       "path": "./.nuxt/tsconfig.app.json"
 7 |     },
 8 |     {
 9 |       "path": "./.nuxt/tsconfig.server.json"
10 |     },
11 |     {
12 |       "path": "./.nuxt/tsconfig.shared.json"
13 |     },
14 |     {
15 |       "path": "./.nuxt/tsconfig.node.json"
16 |     }
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/docs/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const { pastelDocs } = useAppConfig()
 3 | 
 4 | useSeoMeta({
 5 |   title: 'Home',
 6 |   description: pastelDocs.headline,
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <main>
12 |     <AppHeader
13 |       right-slot-classes="grid h-3/4 min-lg:h-[400px] gap-4 grid-cols-3"
14 |     >
15 |       <template #aside>
16 |         <IconSlide />
17 |       </template>
18 |     </AppHeader>
19 |   </main>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
 3 | 
 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively
 5 | export default createConfigForNuxt({
 6 |   features: {
 7 |     // Rules for module authors
 8 |     tooling: true,
 9 |     // Rules for formatting
10 |     stylistic: true,
11 |   },
12 |   dirs: { src: ['./playground', './docs'] },
13 | }).append(
14 |   // your custom flat config here...
15 | )
16 | 


--------------------------------------------------------------------------------
/docs/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   extends: [import.meta.env.THEME_DIRECTORY ?? ['github:oyedejioyewole/nuxt-pastel-docs', { install: true }]],
 3 |   vue: {
 4 |     compilerOptions: {
 5 |       isCustomElement: tag => tag.startsWith('swiper-'),
 6 |     },
 7 |   },
 8 |   site: {
 9 |     url: 'https://nuxt-phosphor-icons.vercel.app',
10 |   },
11 |   content: {
12 |     build: {
13 |       markdown: {
14 |         highlight: {
15 |           theme: {
16 |             dark: 'vitesse-dark',
17 |             default: 'vitesse-light',
18 |           },
19 |         },
20 |       },
21 |     },
22 |   },
23 | })
24 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "[typescript]": {
 3 |     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
 4 |     "editor.codeActionsOnSave": {
 5 |       "source.fixAll.eslint": "explicit",
 6 |       "source.organizeImports": "explicit"
 7 |     }
 8 |   },
 9 |   "[javascript]": {
10 |     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
11 |     "editor.codeActionsOnSave": {
12 |       "source.fixAll.eslint": "explicit",
13 |       "source.organizeImports": "explicit"
14 |     }
15 |   },
16 |   "[vue]": {
17 |     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
18 |     "editor.codeActionsOnSave": {
19 |       "source.fixAll.eslint": "explicit",
20 |       "source.organizeImports": "explicit"
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/docs/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   pastelDocs: {
 3 |     features: [
 4 |       'SSR ready.',
 5 |       'Typescript support.',
 6 |       'Performance focused.',
 7 |       'Handy utility function for the icons.',
 8 |       'Full compatibility with components from @phosphor-icons/vue.',
 9 |     ],
10 |     footer: {
11 |       content: 'Made with :heart: by [oyedejioyewole](https://github.com/oyedejioyewole)',
12 |       iconLinks: {
13 |         'phosphor-logo': 'https://phosphoricons.com/',
14 |         'svgl:nuxt': 'https://nuxt.com',
15 |       },
16 |     },
17 |     headline: 'Phosphor Icons meets Nuxt',
18 |     repo: 'oyedejioyewole/nuxt-phosphor-icons',
19 |     themeColor: '#3c402b',
20 | 
21 |   },
22 | })
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .vercel_build_output
23 | .build-*
24 | .env
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 | 
44 | # Intellij idea
45 | *.iml
46 | .idea
47 | 
48 | # OSX
49 | .DS_Store
50 | .AppleDouble
51 | .LSOverride
52 | .AppleDB
53 | .AppleDesktop
54 | Network Trash Folder
55 | Temporary Items
56 | .apdisk
57 | 


--------------------------------------------------------------------------------
/docs/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
3 |   <path
4 |     d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z"
5 |     style="fill: #848d5e" />
6 | </svg>


--------------------------------------------------------------------------------
/docs/app/components/IconSlide.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const pickIcons = (max: number) =>
 3 |   getIconList()
 4 |     .toSorted(() => Math.random() - 0.5)
 5 |     .slice(0, max)
 6 | 
 7 | const { data: icons, refresh } = await useAsyncData('icons', async () => {
 8 |   const parentArray = pickIcons(6)
 9 | 
10 |   const iconMap = getIconMap()
11 |   for (const icon of parentArray) {
12 |     await prefetchComponents(iconMap[icon])
13 |   }
14 | 
15 |   return parentArray
16 | })
17 | 
18 | const { pause: pauseInterval, resume: resumeInterval } = useIntervalFn(refresh, 2000)
19 | 
20 | const { copied, copy, text: copiedText } = useClipboard()
21 | </script>
22 | 
23 | <template>
24 |   <button
25 |     v-for="(icon, iconIndex) of icons"
26 |     :key="iconIndex"
27 |     v-auto-animate
28 |     class="h-full cursor-pointer rounded-lg ring ring-transparent hover:ring-inherit transition hover:opacity-90 hover:ring-offset-2 bg-primary-200 dark:bg-primary-800 grid place-items-center"
29 |     @click="copy(`<BootstrapIcon name='${icon}' />`)"
30 |     @mouseenter="pauseInterval"
31 |     @mouseleave="resumeInterval"
32 |   >
33 |     <UiIcon
34 |       :name="{
35 |         [icon]: !copiedText.includes(`'${icon}'`) || !copied,
36 |         'clipboard-text': copiedText.includes(`'${icon}'`) && copied,
37 |       }"
38 |       :size="20"
39 |     />
40 |   </button>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/runtime/components/PhosphorIcon.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { computed, preloadComponents, resolveComponent } from '#imports'
 3 | import { getIconMap } from '../utils/icons'
 4 | 
 5 | const iconMap = getIconMap()
 6 | 
 7 | type PhosphorIconName = keyof typeof iconMap
 8 | type PhosphorIconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 9 | 
10 | interface PhosphorIconProps {
11 |   name: PhosphorIconName | Partial<Record<PhosphorIconName, boolean>>
12 |   color?: string
13 |   size?: string | number
14 |   weight?: PhosphorIconWeight
15 |   mirrored?: boolean
16 | }
17 | 
18 | const { name, ...options } = defineProps<PhosphorIconProps>()
19 | const normalizedName = computed(() => {
20 |   if (typeof name === 'string') return name
21 | 
22 |   const iconEntries = Object.entries(name)
23 |   preloadComponents(iconEntries.map(([iconName]) => iconMap[iconName as PhosphorIconName]))
24 | 
25 |   // Pick only the first truthy entry
26 |   const activeIcon = iconEntries.find(([, isTruthy]) => isTruthy)
27 |   return activeIcon ? activeIcon[0] : null
28 | })
29 | 
30 | const Icon = computed(() => {
31 |   const iconMapEntry = Object.entries(iconMap).find(([nameFromMap]) => nameFromMap === normalizedName.value)
32 | 
33 |   if (!iconMapEntry) {
34 |     console.warn(`'${normalizedName.value}' icon doesn't exist, would use a blank <svg> element instead`)
35 |     return 'svg'
36 |   }
37 | 
38 |   return resolveComponent(iconMapEntry[1])
39 | })
40 | </script>
41 | 
42 | <template>
43 |   <component
44 |     :is="Icon"
45 |     v-bind="options"
46 |   >
47 |     <slot />
48 |   </component>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-phosphor-icons",
 3 |   "version": "2.3.3",
 4 |   "description": "An easier way of using @phosphor-icons/vue in your Nuxt project!",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/oyedejioyewole/nuxt-phosphor-icons.git"
 8 |   },
 9 |   "license": "MIT",
10 |   "type": "module",
11 |   "exports": {
12 |     ".": {
13 |       "types": "./dist/types.d.mts",
14 |       "import": "./dist/module.mjs"
15 |     }
16 |   },
17 |   "main": "./dist/module.mjs",
18 |   "typesVersions": {
19 |     "*": {
20 |       ".": [
21 |         "./dist/types.d.mts"
22 |       ]
23 |     }
24 |   },
25 |   "files": [
26 |     "dist"
27 |   ],
28 |   "scripts": {
29 |     "dev": "pnpm --filter docs dev",
30 |     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare docs && nuxi prepare playground",
31 |     "lint": "eslint . --fix",
32 |     "prepack": "nuxt-module-build build",
33 |     "release": "release-it",
34 |     "test": "vitest run",
35 |     "test:watch": "vitest watch",
36 |     "test:types": "vue-tsc --noEmit"
37 |   },
38 |   "dependencies": {
39 |     "@phosphor-icons/vue": "^2.2.1",
40 |     "change-case": "^5.4.4"
41 |   },
42 |   "devDependencies": {
43 |     "@nuxt/devtools": "3.1.1",
44 |     "@nuxt/eslint-config": "^1.11.0",
45 |     "@nuxt/kit": "^4.2.1",
46 |     "@nuxt/module-builder": "^1.0.2",
47 |     "@nuxt/schema": "^4.2.1",
48 |     "@nuxt/test-utils": "^3.20.1",
49 |     "@types/node": "^24.10.1",
50 |     "eslint": "^9.39.1",
51 |     "nuxt": "^4.2.1",
52 |     "release-it": "^19.0.6",
53 |     "typescript": "^5.9.3",
54 |     "vitest": "^4.0.14",
55 |     "vue-tsc": "^3.1.5"
56 |   },
57 |   "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
58 | }
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Phosphor Icons
 2 | 
 3 | [![npm version][npm-version-src]][npm-version-href]
 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
 5 | [![Nuxt][nuxt-src]][nuxt-href]
 6 | 
 7 | An easier way of using [@phosphor-icons/vue](https://phosphoricons.com) in your [Nuxt](https://nuxt.com) project!
 8 | 
 9 | - [🏀 Online playground][playground-href]
10 | - [📖 &nbsp;Documentation](https://nuxt-phosphor-icons.vercel.app)
11 | 
12 | ## Setup
13 | 
14 | Run the following command to install and add the module to your project:
15 | 
16 | ```bash
17 | npx nuxi@latest module add nuxt-phosphor-icons
18 | ```
19 | 
20 | That's it! You can now use `nuxt-phosphor-icons` in your Nuxt app ✨
21 | 
22 | ## Usage
23 | 
24 | ```vue
25 | <PhosphorIcon name="moon-stars" />
26 | ```
27 | 
28 | ## Resources
29 | 
30 | 1. **Documentation**: <https://nuxt-phosphor-icons.vercel.app>
31 | 2. **Phosphor Icons**: <https://phosphoricons.com>
32 | 
33 | ## Contributing
34 | 
35 | You can contribute to this module with StackBlitz:
36 | 
37 | [![Edit OyewoleOyedeji/nuxt-phosphor-icons/main][playground-src]][playground-href]
38 | 
39 | or locally:
40 | 
41 | ### Documentation
42 | 
43 | 1. Clone the repository
44 | 2. Install dependencies with `pnpm install`
45 | 3. Setup module for development with `pnpm dev:prepare`
46 | 3. Run development server with `pnpm dev`
47 | 
48 | **Note:** Hosted on Vercel
49 | 
50 | [![Deploy with Vercel][vercel-src]][vercel-href]
51 | 
52 | <!-- Badges -->
53 | 
54 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-phosphor-icons/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
55 | [npm-version-href]: https://npmjs.com/package/nuxt-phosphor-icons
56 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-phosphor-icons.svg?style=flat&colorA=18181B&colorB=28CF8D
57 | [npm-downloads-href]: https://npmjs.com/package/nuxt-phosphor-icons
58 | [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
59 | [nuxt-href]: https://nuxt.com
60 | [playground-src]: https://developer.stackblitz.com/img/open_in_stackblitz.svg
61 | [playground-href]: https://stackblitz.com/~/github.com/oyedejioyewole/nuxt-phosphor-icons
62 | [vercel-src]: https://vercel.com/button
63 | [vercel-href]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOyewoleOyedeji%2Fnuxt-phosphor-icons
64 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
  1 | import { name as packageName } from '../package.json'
  2 | 
  3 | import {
  4 |   addComponent,
  5 |   addComponentsDir,
  6 |   addImportsSources,
  7 |   addTemplate,
  8 |   addTypeTemplate,
  9 |   createResolver,
 10 |   defineNuxtModule,
 11 |   resolveFiles,
 12 |   useLogger,
 13 | } from '@nuxt/kit'
 14 | import { kebabCase, pascalCase } from 'change-case'
 15 | import { dirname, parse } from 'node:path'
 16 | 
 17 | // Module options TypeScript interface definition
 18 | export interface ModuleOptions {
 19 |   /**
 20 |    * This key allows you to set the name of the registered component.
 21 |    *
 22 |    * @default "phosphor-icon"
 23 |    * @link https://nuxt-phosphor-icons.vercel.app
 24 |    */
 25 |   componentName: string
 26 | }
 27 | 
 28 | export default defineNuxtModule<ModuleOptions>({
 29 |   meta: {
 30 |     name: packageName,
 31 |     configKey: 'phosphorIcons',
 32 |     compatibility: {
 33 |       nuxt: '>=3.0.0',
 34 |     },
 35 |   },
 36 |   // Default configuration options of the Nuxt module
 37 |   defaults: {
 38 |     componentName: 'phosphor-icon',
 39 |   },
 40 |   async setup(options, nuxt) {
 41 |     const { resolve, resolvePath } = createResolver(import.meta.url)
 42 |     const logger = useLogger(packageName)
 43 | 
 44 |     addComponent({
 45 |       filePath: resolve('./runtime/components/PhosphorIcon.vue'),
 46 |       name: kebabCase(options.componentName),
 47 |     })
 48 | 
 49 |     addImportsSources({
 50 |       from: resolve('./runtime/utils/icons.ts'),
 51 |       imports: ['getIconList', 'getIconMap'],
 52 |     })
 53 | 
 54 |     const source = resolve(
 55 |       dirname(await resolvePath('@phosphor-icons/vue')),
 56 |       'icons',
 57 |     )
 58 | 
 59 |     const phosphorIcons = (await resolveFiles(source, '*.vue.mjs')).map((filePath) => {
 60 |       let { name: filename } = parse(filePath)
 61 |       filename = filename.split('.').at(0) ?? ''
 62 | 
 63 |       return {
 64 |         componentName: pascalCase(`${filename}-vue`), importName: filename, listName: kebabCase(filename.substring(2)), path: filePath,
 65 |       }
 66 |     })
 67 | 
 68 |     // Create module types and register its alias.
 69 |     const typeTemplate = addTypeTemplate({
 70 |       filename: `types/${packageName}.d.ts`,
 71 |       getContents: () => [
 72 |         `// Provided by ${packageName}`,
 73 |         `export type PhosphorIconName = ${phosphorIcons.map(icon => `'${icon.listName}'`).join(' | ')}`,
 74 |       ].join('\n'),
 75 |       write: true,
 76 |     })
 77 |     nuxt.options.alias['#phosphor-icons/types'] = typeTemplate.dst
 78 | 
 79 |     // Register the icons globally as async chunks (through the nuxt:components plugin)
 80 |     addComponentsDir({
 81 |       path: source,
 82 |       isAsync: true,
 83 |       global: true,
 84 |       pattern: ['*.vue.mjs'],
 85 |     })
 86 | 
 87 |     // Register a key-value mapping of icon.listName -> icon.componentName.
 88 |     // Also register its alias.
 89 |     const template = addTemplate({
 90 |       filename: `${packageName}.map.mjs`,
 91 |       getContents: () => [
 92 |         `// Provided by ${packageName}`,
 93 |         'export default {',
 94 |         phosphorIcons.map(icon => ` "${icon.listName}": "${icon.componentName}"`).join(',\n'),
 95 |         '}',
 96 |       ].join('\n'),
 97 |       write: true,
 98 |     })
 99 |     nuxt.options.alias['#phosphor-icons/map'] = template.dst
100 | 
101 |     logger.success(`${phosphorIcons.length} icons have been registered.`)
102 |   },
103 | })
104 | 


--------------------------------------------------------------------------------
/docs/content/get-started.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | displayToc: true
  3 | ---
  4 | 
  5 | # Get started
  6 | 
  7 | This page would guide you through using this module.
  8 | 
  9 | ## Setup
 10 | 
 11 | Run the following command to add the module to your project:
 12 | 
 13 | ```bash [>_]
 14 | $ pnpm dlx nuxi@latest module add nuxt-phosphor-icons
 15 | ```
 16 | 
 17 | Congratulations 🎉. You have successfully add the module to your project and can now browse the [icon library](https://phosphoricons.com)
 18 | 
 19 | **Note:** This module would add a little bit of an overhead in the development and production environments.
 20 | 
 21 | **Why?** Well, this module loads :IconCount icons globally as async chunks with no prefetching/preloading &mdash; I might add. No further explanation, that's all.
 22 | 
 23 | ## Usage
 24 | 
 25 | I want to read about the
 26 | 
 27 | ::UiTabs{:tabs='["component", "types", "utilities"]'}
 28 | 
 29 | #tab-1
 30 | 
 31 | ```vue [YourComponent]
 32 | <PhosphorIcon name="sun" />
 33 | ```
 34 | 
 35 | You can use the props below to customize how the icon being rendered
 36 | 
 37 | ::UiTabs{:tabs='["color", "mirrored", "name", "size", "weight"]'}
 38 | 
 39 | #tab-1
 40 | Choose icon stroke/fill color. It can be any CSS color string, including **_hex, rgb, rgba, hsl, hsla, named colors,_**{.font-cursive} or the special **_currentColor_**{.font-cursive} variable.
 41 | 
 42 | ```vue
 43 | <PhosphorIcon color="#eee" />
 44 | ```
 45 | 
 46 | #tab-2
 47 | Flip the icon horizontally. This can be useful in RTL languages where normal icon orientation is not appropriate.
 48 | 
 49 | ```vue
 50 | <PhosphorIcon :mirrored="true" />
 51 | ```
 52 | 
 53 | #tab-3
 54 | Choose what icon to render. You can find them in the [icon library](https://phosphor-icons.com)
 55 | 
 56 | ```vue [YourComponent]
 57 | <PhosphorIcon name="moon-stars" />
 58 | ```
 59 | 
 60 | You could also dynamically render an icon based on conditions, i.e;
 61 | 
 62 | ```vue [YourComponent]
 63 | <PhosphorIcon
 64 |   :name="{ 'moon-stars': isLightModeToggled, sun: !isLightModeToggled }"
 65 | />
 66 | ```
 67 | 
 68 | It's preferrable if there is only one key-value pair that's truthy at all times, else the component uses `.find()` to get the first truthy match.
 69 | 
 70 | **Note:** Doing this preloads all the keys of the `name` prop object (to load times faster).
 71 | 
 72 | You could also extend the component with custom attributes utilizing the `<slot />` element provided within the runtime component.
 73 | 
 74 | ```vue [YourComponent]
 75 | <PhosphorIcon name="moon-stars">
 76 |   <style> /* Your styling goes here */ </style>
 77 | </PhosphorIcon>
 78 | ```
 79 | 
 80 | #tab-4
 81 | Choose icon height & width. This can be a number, or a string with units in **_px, %, em, rem, pt, cm, mm, in_**{.font-cursive}.
 82 | 
 83 | ```vue
 84 | <PhosphorIcon size="24px" />
 85 | ```
 86 | 
 87 | #tab-5
 88 | Choose icon weight/style.
 89 | 
 90 | **Options:** `"thin"` | `"light"` | `"regular"` | `"bold"` | `"fill"` | `"duotone"`
 91 | 
 92 | ```vue
 93 | <PhosphorIcon weight="duotone" />
 94 | ```
 95 | 
 96 | ::
 97 | 
 98 | #tab-2
 99 | 
100 | This modules exposes the following types during runtime
101 | 
102 | ```ts
103 | import type { PhosphorIconName } from "#phosphor-icons/types";
104 | ```
105 | 
106 | #tab-3
107 | 
108 | This module exposes the following utility functions:
109 | 
110 | ::UiTabs{:tabs='[".getIconList()", ".getIconMap()"]'}
111 | 
112 | #tab-1
113 | This function returns an array of icons available in the [icon library](https://phosphoricons.com)
114 | 
115 | ```vue [YourComponent]
116 | <script lang="ts" setup>
117 | const icons = getIconList();
118 | 
119 | console.log(icons); // [ ... ]
120 | </script>
121 | ```
122 | 
123 | #tab-2
124 | This function returns the icon map of registered icons to their runtime components
125 | 
126 | ```vue [YourComponent]
127 | <script lang="ts" setup>
128 | const iconMap = getIconMap(); // { ... }
129 | 
130 | // Usage
131 | const Icon = resolveComponent(iconMap["icon-name"]);
132 | </script>
133 | ```
134 | 
135 | This is also the preferable method if you want to `preload` icons before displaying them.
136 | 
137 | You do this using the [preloadComponents](https://nuxt.com/docs/4.x/api/utils/preload-components) utility provided by the `Nuxt` team.
138 | 
139 | ```vue [YourComponent]
140 | <script lang="ts" setup>
141 | await preloadComponents(iconMap["icon-name"]);
142 | </script>
143 | ```
144 | 
145 | **Tip:** Maybe pair this logic with [@formkit/auto-animate](https://auto-animate.formkit.com) for smooth transitions whenever the DOM changes
146 | 
147 | ::
148 | 
149 | ::
150 | 
151 | ## Configuration
152 | 
153 | You can configure the module using the `phosphorIcons` key in the `nuxt.config`
154 | 
155 | ::UiTabs{:tabs='["componentName"]'}
156 | 
157 | #tab-1
158 | 
159 | This key allows you to set the name of the component registered by the module.
160 | 
161 | **Default:** `phosphor-icon`
162 | 
163 | ```ts [nuxt.config]
164 | export default defineNuxtConfig({
165 |   phosphorIcons: {
166 |     componentName: "phi",
167 |   },
168 | });
169 | ```
170 | 
171 | ::
172 | 


--------------------------------------------------------------------------------