Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qinshenxue/vue-icon
Maybe it is the smallest vue component that contains all the feather icons
https://github.com/qinshenxue/vue-icon
feather feather-icons icons svg vue-component vue-feathers vue-icon vue2 vue2-component
Last synced: about 2 months ago
JSON representation
Maybe it is the smallest vue component that contains all the feather icons
- Host: GitHub
- URL: https://github.com/qinshenxue/vue-icon
- Owner: qinshenxue
- License: mit
- Created: 2017-02-06T08:31:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T14:30:47.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T10:21:58.326Z (3 months ago)
- Topics: feather, feather-icons, icons, svg, vue-component, vue-feathers, vue-icon, vue2, vue2-component
- Language: HTML
- Homepage: https://qinshenxue.github.io/vue-icon/
- Size: 658 KB
- Stars: 54
- Watchers: 2
- Forks: 12
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-icon
[](https://www.npmjs.com/package/vue-icon)
[](https://www.npmjs.com/package/vue-icon)
> vue2 svg icon component
Maybe it is the smallest vue component library that contains all the feather icons
# Icons
[https://qinshenxue.github.io/vue-icon/](https://qinshenxue.github.io/vue-icon/)
# Usage
using npm
``` shell
$ npm install vue-icon
```
The default component name is icon, you can specify a new component name with `Vue.use(plugin,customName)`.
```js
import Vue from 'vue';
import App from './app.vue';
import feather from 'vue-icon'
Vue.use(feather, 'v-icon')
new Vue({
el: '#app',
render: h => h(App)
});
```
Or configure an object to change the name and the default icon class.
```js
Vue.use(feather, {
name: 'v-icon',
props: {
baseClass: {
type: String,
default: 'v-icon'
},
classPrefix: {
type: String,
default: 'v-icon-'
}
}
})
// or
Vue.use(feather, {
name: 'v-icon',
data(){
return {
baseClass: 'v-icon',
classPrefix: 'v-icon-'
}
}
})
```
The configured objects are treated as [mixins](https://vuejs.org/v2/api/index.html#mixins), so you can define it like normal Vue instance objects.
using in `.vue` file
``` xml
import customIcon from 'vue-icon/lib/vue-feather.esm'
export default{
components: {
customIcon
},
data: function () {
return {
baseClass: 'v-icon'
}
}
}
.v-icon,
.custom-icon {
width: 24px;
}
```
Or using script tag
``` xml
```
## Icon Style
Components don't contain any style definitions, you can define styles based on `baseClass:'icon'` and `classPrefix:'icon-'`.
``` css
.icon{
color:#666
}
.icon:hover{
color:#000
}
.icon-close{
color:red
}
```
# Component Attributes
| Attribute | Description | Type | Default |
| ------------- | ------------- |:-------------:| :-------------:|
| name | The name of icon | string | -- |
| base-class | icon base class | string | icon |
| class-prefix | icon class prefix | string | icon- |
# Changelog
Detailed changes for each release are documented in the release notes.