antonreshetov / vue-unicons Goto Github PK
View Code? Open in Web Editor NEW1000+ Pixel-perfect svg icons for your next project as Vue components
Home Page: https://antonreshetov.github.io/vue-unicons/
License: MIT License
1000+ Pixel-perfect svg icons for your next project as Vue components
Home Page: https://antonreshetov.github.io/vue-unicons/
License: MIT License
This repository could use a type declaration file for TypeScript users. I could write one myself if you are busy @antonreshetov.
uni namespace at the beginning is not really a necessary. It makes it hard to type and read. And import and usage names are also different.
Hi, im having a issue:
When I import each icon, it still imports everything...
My import code:
`import Unicon from 'vue-unicons'
import {
uniSubject, uniApps, uniCommentAlt, uniBell, uniExit, uniSearch,
uniPlusCircle, uniCheck, uniTimes, uniAngleDown, uniAngleDoubleLeft,
uniAngleDoubleRight, uniArrowUp, uniArrowDown, uniBox, uniFileDownloadAlt,
uniMoon, uniBrightnessEmpty, uniTextSize, uniTextFields
} from 'vue-unicons/src/icons'
Unicon.add([
uniSubject, uniApps, uniCommentAlt, uniBell, uniExit, uniSearch,
uniPlusCircle, uniCheck, uniTimes, uniAngleDown, uniAngleDoubleLeft,
uniAngleDoubleRight, uniArrowUp, uniArrowDown, uniBox, uniFileDownloadAlt,
uniMoon, uniBrightnessEmpty, uniTextSize, uniTextFields
])
Vue.use(Unicon)`
My bundle analizer shows that vue-unicons is almost 1/3 (roughly 600kb) of my entire project :(
Im using the latest @vue/cli PWA template
I have just installed the module in my vue project.
Vue version: 2.6.10
Vue unicons version: 3.3.1
Using the following code everything is fine:
<unicon name="car-wash" fill="limegreen"></unicon>
<unicon name="layer-group" fill="royalblue" icon-style="monochrome"></unicon>
However, when I use these icons (found on https://antonreshetov.github.io/vue-unicons/):
<unicon name="angle-up"></unicon>
<unicon name="wifi"></unicon>
I get empty placeholders, and the following errors in console:
Name 'angle-up' of the icon is not correct
Name 'wifi' of the icon is not correct
What do I miss?
Sorry if this is the wrong place to raise this, but just wanted to let you know that I couldn't get from the demo page to your GitHub without searching on GitHub as the link href is incorrect.
<a href="http://">
GitHub
</a>
I saw this when auditing my npm packages:
Critical Command Injection
Package open
Patched in >0.0.5
Dependency of vue-unicons
Path vue-unicons >
e25a510fcb3da933736e6860a53583ace2a3dd0d98fbeced95aaaedd959…
> fontello-cli > openMore info https://npmjs.com/advisories/663
How to import all icons without one by one
Suggestion:
<path d="M 9.042 4.406 C 8.791 4.391 8.523 4.48 8.287 4.717 L 4.287 8.717 C 4.195 8.812 4.125 8.924 4.078 9.047 C 3.978 9.29 3.978 9.565 4.078 9.808 C 4.125 9.931 4.195 10.043 4.287 10.139 L 8.287 14.139 C 8.678 14.533 9.317 14.533 9.708 14.139 C 10.103 13.747 10.103 13.108 9.708 12.717 L 7.408 10.428 L 16.997 10.428 C 17.55 10.428 17.997 10.875 17.997 11.428 L 17.997 16.596 C 17.997 17.148 17.55 17.596 16.997 17.596 L 11.152 17.594 C 10.125 17.593 10.078 19.59 11.15 19.592 L 16.997 19.595 C 18.654 19.595 19.997 18.252 19.997 16.595 L 19.997 11.428 C 19.997 9.771 18.654 8.428 16.997 8.428 L 7.408 8.428 L 9.708 6.139 C 10.418 5.429 9.797 4.45 9.042 4.406 Z"/>
Hi there,
Thanks for the incredible library!
Had a question (forgive me, I'm relatively new to the Vue world). I'm using Vuetify inputs and part of their api is to pass a prop to use icons as such:
prepend-icon='constructor'
How would I go about adding the unicon with all of its props as an icon to a Vuetify input?
Can request heart icon in icon-style="monochrome"?
https://v3-migration.vuejs.org/breaking-changes/emits-option.html#migration-strategy
I think all that is needed is to declare the click event in the new emits option...
I am not able use your icons they seems not safe at the moment. Can you review below what npm audit produced?
$ npm audit
=== npm audit security report ===
┌──────────────────────────────────────────────────────────────────────────────┐
│ Manual Review │
│ Some vulnerabilities require your attention to resolve │
│ │
│ Visit https://go.npm.me/audit-guide for additional guidance │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Critical │ Command Injection │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ open │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >0.0.5 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-unicons │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ vue-unicons > @iconscout/unicons > fontello-cli > open │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/663 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Arbitrary File Overwrite │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ fstream │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ >=1.0.12 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-unicons │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ vue-unicons > @iconscout/unicons > fontello-cli > unzip > │
│ │ fstream │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/886 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 2 vulnerabilities (1 high, 1 critical) in 20543 scanned packages
2 vulnerabilities require manual review. See the full report for details.
I would like to use icons inside element-io sidemenu.
Since there are different colors for items and active item, I would like to change icon color using css.
(I don't see how it can be done using fill
property).
Is it possible to set icon color using css?
Please consider adding a prop that allows developers to pass a title attribute to the SVG's for purposes of WCAG compliance. Great library.
Hi,
when I deploy a gridsome + vue-unicons project on netlify, I've got the following error:
5:28:02 AM: Could not generate HTML for "/tag/shoes/":
5:28:02 AM: ReferenceError: document is not defined
5:28:02 AM: at addStyle (node_modules/vue-unicons/dist/vue-unicons.common.js:329:0)
...
I'm sure it's the same issue than with Nuxt.js, described in the documentatin, but I can't find the right configuration for gridsome.
Any idea ?
thanks
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
+ [email protected]
added 53 packages from 27 contributors and audited 24896 packages in 15.337s
found 1 critical severity vulnerability
For some reason no matter how many icons are imported, the way shown in your "cart", package size in my bundle is 400+K, just like all icons are imported
发现<style scoped>的scoped去掉就可以了
I'm considering switching my current project over to using these icons, but I need a save
icon since it is a huge part of my application.
When I installed the package from npm, I was warned that there's high severity vulnerability in the package.
Apparently, @iconscout/unicons
uses axios v0.19.0
, while the vulnerability was fixed in v0.21.1
.
Hello Anton,
The release of v2.0.0 introduced a few bugs when adding custom icons:
style
attribute as wellviewBox
on the svg as it is now inside a container (it will set the viewbox on the container)Thanks – great library otherwise!
hi, i couldn't find a way to fill the icon with the gradient colors,
if there is a method kindly guide me through the steps
The demo code is not complete, there is no template tag content, which is very annoying.
After wasting a precious time, it turns out that the name is to use the name attribute defined in the component.
Would be good to be able to set defaults:
Vue.use(unicons, {
width: 20,
height: 20,
fill: '#FF0000',
})
Looks like the typescript definition files are not in the npm bundle (no src
file)
{
"name": "vue-unicons",
"version": "3.3.0",
"private": false,
"description": "1000+ Pixel-perfect svg icons for your next project as Vue components",
"main": "./dist/vue-unicons.umd.js",
// ....
"types": "./src/main.d.ts"
}
I m using vue-unicons with in my vue/quasar project and i m getting this npm warn :
npm WARN deprecated [email protected]: Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package.
i also check its npm page and there is deprication warning there as well. can any one update that on this library please.
Hello mate, thanks for repo. I could not add this plugin to my vue 3 + typescript project. Can you add main.ts import example please ? thanks in advance :)
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount("#app");
It would be useful if the icons could inherit the parent color or allow classes to modify the color of the icons.
Hello everyone,
The prop fill is assigned to a data variable called localFill, only when the component is being created.
data () {
return {
localFill: this.fill
}
}
That makes not posible to change the fill prop once the icon is mounted.
You can see in this example.
Maybe setting a watcher on the prop fill that update localFill is the fix?
Hey @antonreshetov,
It seems that the package is not packaged for distribution:
Really, only the core files should be sent up to NPM (absolutely not node modules!) and the demo files should be managed separately (folder or repo).
I've got quite a bit of experience in packaging libs. Would you like some help?
Additionally, I think the main component could be rebuilt as a functional component with a render function, which would optimise it for speed. Could do this at the same time.
LMK.
"export 'uniShare' was not found in 'vue-unicons/src/icons', however uniShareAlt is fine
Currently you have to add all icons into library in one central place (eg main App.vue component).
I tried to follow @fortawesome/vue-fontawesome pattern i.e. add icons to library in specific components using it, which seems to be good pattern for tree-shaking.
But only icons added in one component are present in the library (possibly the first or last one?), resulting in blank icons in others.
As you can see in audit report, there is a severity vulnerability problem. It is due to the nth-check package. Versions of some subpackages are outdated. npm audit fix --force
or npm audit fix
not working because when returning to the old version, this time, axios-related problems arise. Can you update the dependencies?
nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - GHSA-rp65-9cf3-cjxr
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
@iconscout/unicons *
Depends on vulnerable versions of svgo
node_modules/@iconscout/unicons
vue-unicons 1.3.1 - 1.4.1 || >=2.2.0
Depends on vulnerable versions of @iconscout/unicons
node_modules/vue-unicons
I'm getting the error below using vue-unicons in a Nuxt project with typescript.
ERROR in .../node_modules/vue-unicons/src/main.d.ts
Invalid module name in augmentation. Module 'vue-unicons/src/icons' resolves to an untyped module at '.../node_modules/vue-unicons/src/icons.js', which cannot be augmented.
> | declare module "vue-unicons/src/icons" {
| ^
| export const icons: { name: string; path: string }
| }
I'm using the latest versions of vue-unicons (2.0.3), Nuxt (2.10.2) and nuxt/typescript (2.8.1).
I loaded it by writing the Nuxt vue plugin below:
import Vue from 'vue'
import Unicon from 'vue-unicons'
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/src/icons'
Unicon.add([uniLayerGroupMonochrome, uniCarWash])
Vue.use(Unicon)
The icons do appear but I can't make that error go away. Any idea how to look into this more deeply?
I'm not sure whether it's a problem with vue-unicons or with @nuxt/typescript or my code.
Hey,
First off, awesome work, I've used vue-unicons for 3 projects and it works like a charm. Just here to note that the elipsis-double-v-alt
icon is missing. I've now added it as a custom icon, so it's not a problem really, but figured I'd give a note of it anyway.
^
Hey,
Looks like a great lib! Just about to switch to Unicons and up this pops.
I don't see the point of the uni
prefix. I suspect most people will move their setup to a plugin file (you have to in Nuxt by default) so this just seems like extra code.
Additionally, if both the imports and the names were camelCase, it would make it much easier to copy / paste icon names as they are needed:
import { checkCircle } from 'vue-unicons/src/icons'
Unicon.add([ checkCircle ])
<unicon name="checkCircle"/>
Looking forward to using.
:D
Hi there,
I'm trying to pass some properties to my imported icons, but I would like to access the parent Unicon div container rather than the svg element. Is there a way to do this ?
example with pug :
Unicon(position="right") results as , but I'd like to render
Thanks
There's an typo : uniSqureShapeMonochrome.
Single component for each icon or other way to use only the necessary icons
There is a transition applied by default on all property (Unicon.vue l113). It is quite hard to overide or to disbale when needed. Could it be controlled (on / off) by a prop ? It could be activated by default so that those who rely on it are not impacted.
I can't seem to get this to work with nuxt. I keep getting the warning: Unknown custom element: <unicon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My plugin/vue-unicons.js
looks like this
import Vue from "vue";
import Unicon from "vue-unicons";
import { uniCarWash } from "vue-unicons/src/icons";
Unicon.add([uniCarWash]);
Vue.use(Unicon);
My nuxt config looks like this:
plugins: [{ src: "~/plugins/vue-unicons.js", mode: "client" }],
Maybe this is a SSR issue?
When building vue 3 app with vite, I get the following error with vue-unicons:
openBlock' is not exported by node_modules/vue-unicons/node_modules/vue/dist/vue.runtime.esm.js, imported by node_modules/vue-unicons/dist/vue-unicons.es.js
node_modules/vue-unicons/dist/vue-unicons.es.js:1:7
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.