Comments (11)
@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 😄
from vue.
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 😅
from vue.
Let's hope the maintainers are still active.
Edit: There are a few issues I still need to fix.
from vue.
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.
from vue.
Got the same problem. Any news?
from vue.
Got the same problem. Any news?
No, but i switched to vue-feather-icons
from vue.
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
from vue.
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'
})
from vue.
Have same issue
from vue.
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.
from vue.
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.
from vue.
Related Issues (16)
- '/@modules/vue.js' does not provide an export named 'default' when using vitejs HOT 1
- Ability to use icons via Name parameter HOT 2
- @vue/cli-service: Cannot find module '@/lib/types'
- Icons not tree-shakable by other bundlers
- TypeScript errors: "no exported member..." HOT 3
- Webpack error stating no appropriate loaders HOT 9
- npm ERR! Could not resolve dependency in Quasar vue HOT 5
- Export PhosphorIcon type HOT 4
- Global import broken HOT 2
- "Error: EMFILE: too many open files... " when deploying Nuxt 3 app with Phosphor Icons to Netlify HOT 3
- Module not found: Error: Default condition should be last one HOT 3
- `@phosphor-icons/vue/compact` significantly increases the build time HOT 1
- Not clone src/lib folder HOT 4
- Imported components used with `<component :is="">` ignored in production HOT 8
- Update peer dependency version HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue.