Don't know where the other issue went, so I'll create a new one to keep track of this.

It seems that with the current configuration of Rollup, it's not possible to tree shake unused icons when using this library with other bundlers such as Webpack.

We want to save the icon names as strings in our db, then use them via a name option, this is not currently possible via importing each icon seperatly.

E.g.

Is this something that could be implemented?

I'm using a custom component to render all my icons:

<template>
  <component :is="name" :weight="weight" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import {
  PhCaretUp as Up,
} from 'phosphor-vue'

export default defineComponent({
  name: 'Icon',
  props: {
    name: { type: String, required: true },
    weight: { default: 'regular' },
  },
  components: {
    Up,
  },
})
</script>

Hello,

we've got some type errors while importing single icons in vue/nuxt with typescript.
The import looks like this:

<script lang="ts">
import { PhXCircle, PhCalendarBlank, PhClock } from 'phosphor-vue'

DESCRIPTION

Hi, I just wanted to use phosphor vue for my quasar vue application.
But when I run npm install --save phosphor-vue@next, it gets an error like below.
Does anyone know why? Is it because it doesn't support quasar vue or what? Thankyou.

ERROR LOG

$ npm install phosphor-vue@next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.2.29" from @quasar/[email protected]
npm ERR! node_modules/@quasar/app
npm ERR! dev @quasar/app@"^3.0.0" from the root project
npm ERR! peer vue@"3.2.37" from @vue/[email protected]
npm ERR! node_modules/@vue/server-renderer
npm ERR! @vue/server-renderer@"3.2.37" from [email protected]
npm ERR! 9 more (emoji-mart-vue-fast, v-money3, vue-gtag, vue-i18n, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! phosphor-vue@"4.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"^3.0.0 <3.0.3" from [email protected]
npm ERR! node_modules/phosphor-vue
npm ERR! phosphor-vue@"4.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ASUS\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache_logs\2022-07-15T02_44_38_791Z-debug-0.log

🐛 The bug

When I deploy my Nuxt 3 app which uses the @phosphor-icons/vue package to Netlify, the deployment is successful but when I visit the site, initially, I get an error:

After some time, when I revisit the site, I get this error:

It works okay in development and I've also tried building the app locally, Nuxt uses the "node-server" option and that works fine.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-tfqdxc?file=app.vue

🌈 Expected behaviour

The Icons should be displayed in production when deployed to Netlify and not crash the entire app.

ℹ️ Additional context

No response

I am trying to use phosphor-vue in a project that is set up with vitejs.

I tried to

//vite.config.js
optimizeDeps: {
    exclude: ['dayjs', 'phosphor-vue']
  }

//app.vue
<template>
  <div>
    <PhHorse />
    <PhHeart :size="32" color="hotpink" weight="fill" />
    <PhCube />
  </div>
</template>

<script>
  import { PhHorse, PhHeart, PhCube } from "phosphor-vue";
  export default {
    name: "App",
    components: {
      PhHorse,
      PhHeart,
      PhCube
    }
  };
</script>

The src/lib folder not cloning when I run npm install. So I could not build project

Hello! Thank you for the nice icons.

I have switched to npm 7 and it installs peer dependencies by default. So when I updated Vue to 3.0.11 I got a conflict with phosphor-vue's peer dependencies:

  "peerDependencies": {
    "vue": "^3.0.0 <3.0.3"
  },

When I try to use phosphor-vue with @vue/cli-service I get the error Cannot find module @/lib/types. To avoid that error, I had to copy the file phosphor-vue/src/lib/types.ts locally. Because in @vue/cli-service the alias @ only points to the local directory src

Hey there!
I currently use Phosphor Icons for my Nuxt.js website, however I've been receiving this error when trying to load my site:

 ERROR  in ./node_modules/phosphor-vue/dist/phosphor-vue.esm.js                                                                       friendly-errors 12:24:55

Module parse failed: Unexpected token (40:21)                                                                                         friendly-errors 12:24:55
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         contextWeight
|       } = this;
>       return weight ?? contextWeight;
|     },
| 

Hi, I'd like to ensure a PhosphorIcon is being passed as a prop, but unfortunately this type isn't exported by phosphor-vue.

What I'd like to do is this:

const props = defineProps<{
  label: string;
  icon: PhosphorIcon;
}>();

    <component
      :is="icon"
      :size="20"
      :width="20"
      :weight="isActive ? 'fill' : 'regular'"
    />

i am only loading the following

import {
  PhLockKeyOpen,
  PhUser,
  PhSun,
  PhMoon,
  PhPlayCircle,
  PhImage,
} from 'phosphor-vue'

import Vue from 'vue'

Vue.component('PhLockKeyOpen', PhLockKeyOpen)
Vue.component('PhUser', PhUser)
Vue.component('PhSun', PhSun)
Vue.component('PhMoon', PhMoon)
Vue.component('PhPlay', PhPlayCircle)
Vue.component('PhImage', PhImage)

🐛 The bug

Compact bundle significantly increases the build time. That being said, the import cost for the bundle is 3.8M:

As mentioned in v2.1.4 changelog compact scope bundles all files in a single file aiming to fix the EMFILE error.

Is there any other way of avoiding Error: EMFILE: too many open files... error as in #35 besides using compact scope?

🛠️ To reproduce

🌈 Expected behaviour

A proposed solution would be exporting per-file icons as in:

import PhHouse from "@phosphor-icons/vue/icons/PhHouse.vue"

ℹ️ Additional context

No response

📚 What are you trying to do?

import { PhCircle,PhTextAa,PhEyeSlash } from "@phosphor-icons/vue";

this line makes me below error. Does not understand what is issue. I have other appas well and all working fine.

Module not found: Error: Default condition should be last one

ERROR in ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js) 3:0-2137
Module not found: Error: Default condition should be last one
 @ ./src/Student/components/CustomElements/PIcons.vue?vue&type=script&setup=true&lang=js 1:0-221 1:0-221 1:222-432 1:222-432
 @ ./src/Student/components/CustomElements/PIcons.vue 2:0-68 3:0-63 3:0-63 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 8:0-60 106:14-20
 @ ./src/Student/StudentData.vue?vue&type=script&setup=true&lang=js 1:0-214 1:0-214 1:215-418 1:215-418
 @ ./src/Student/StudentData.vue 2:0-73 3:0-68 3:0-68 6:49-55
 @ ./src/router/routes.js 265:15-51
 @ ./src/main.js 12:0-40 113:8-14

🐛 The bug

With the previous version phosphor-vue, global import was possible using

import { createApp } from 'vue'
import PhosphorVue from 'phosphor-vue'

const app = createApp(App)
app
  .use(PhosphorVue)

app.mount('#app')