Production build imports all icons !

[kgnfth]

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 build result creates big javascript file

[JamesNeumann]

Got the same problem. Any news?

[kgnfth]

Got the same problem. Any news?

No, but i switched to vue-feather-icons

[HassanZahirnia]

Same issue here, Any solutions yet ?
@hypernova7 your solution seems to be for those who want to import everything. We don't want to import everything and just need to import what we need.

I'm importing only 14 icons and webpack-bundle-analyzer shows 19.2MB (1.36 Gzipped) of my build size is from phosphor-vue.esm.js ! which is a lot

[HassanZahirnia]

I couldn't fix the issue and there are no words from the maintainer so I decided to move on from this project and use what @kgnfth suggested earlier ( feather icons ) but I use it's svg sprite version which adds a ~60KB to your page and you can use any icons you need. I really had enough of importing each icons individually 😅

[hypernova7]

What I did to import them separately was to create a nodejs script where I created an array with the list of all the icons. And based on that list, generate all Vue.component for each icon in a separate script, then import and use them globally. Something like that:

node script

const fs = require('fs');
const icons = ['PhX', 'PhUser']
const content = ''
const iconComponentsDir = 'phosphor-vue/src/components'
icons.forEach((icon) => {
  content += `Vue.component(${icon}, require('${iconComponentsDir}/${icon}.vue'));\n`
})
fs.writeFileSync('./src/phosphor-icons.js', content);

main.js

import Vue from 'vue'
import './src/phosphor-icons'

new Vue({
  el: '#app'
})

[edbond88]

Have same issue

[sstottelaar]

Did you use it with Vue 3? On the Vue 3 branch, it says in the docs that there is a known bug in Rollup that prevents tree shaking. I think this issue is related.

[dnlsndr]

Let's hope the maintainers are still active.

Edit: There are a few issues I still need to fix.

[rektdeckard]

Hey all. Lack of tree-shaking sucks, I'm with you. While my partner and I are generally still quite active on the Phosphor project, I am not a Vue dev, nor am I currently planning to be. This port was originally submitted by a community member, and it'll take community members to keep it running and improving.

Being unfamiliar with the state of Vue and its build tools, I don't have a fix for this. But, if you'd like to contribute, or to join as a maintainer, please let me know.

[dnlsndr]

@rektdeckard Thanks for letting us know! I've fixed tree shakability as well as updated several packages, and brought the project structure to the newest sfc-vue project structure standard. It would be great if you could review it 😄

[dnlsndr]

Update: This issue will be solved with the next major release. For now you can install a pre-release alpha version via npm install @phosphor-icons/vue@next. Note that this pre-release is in alpha and bound to change.

This solution is for vue 3.