mazipan / vue-ionicons Goto Github PK

View Code? Open in Web Editor NEW

96.0 3.0 16.0 11.26 MB

⛄️ Vue Icon Set Components from Ionic Team

Home Page: https://mazipan.github.io/vue-ionicons

License: MIT License

JavaScript 32.68% CSS 46.31% HTML 21.01%

vue-icon ionicons vue-ionicons

vue-ionicons's Introduction

⛄ Vue Ionicons

Vue Icon Set Components from Ionic Team

Design icons sourced from the Ionicons project.

🎉 Demo

https://mazipan.github.io/vue-ionicons

🚀 Getting started

Install the package

# NPM
npm install --save vue-ionicons

# Yarn
yarn add vue-ionicons

Import the icon, and declare it as a local component:

import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
// OR using transpiled js version
// import AlertIcon from 'vue-ionicons/dist/js/ios-alert'

components: {
  AlertIcon
}

Declare it as a global component:

import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
// OR using transpiled js version
// import AlertIcon from 'vue-ionicons/dist/js/ios-alert'

Vue.component('alert-icon', AlertIcon)

Note Icon files are kebab cased, e.g. alert-circle.vue. All icon generated can be see in dist folder.

Include global CSS/SCSS in your main.js

# Using plain css
require('vue-ionicons/ionicons.css')
# Or using SCSS import
@import('~vue-ionicons/ionicons.scss')

Then use it in your template code!
```
<AlertIcon />
```

Import some icon sets

Sometimes we don't want import one by one, so from v2.3.0 we can include this groups icon: ios, md, logo.

import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'

Vue.use(AllIosIcon)

/*
-- File available --
Material: ionicons-md.js
Logo: ionicons-logo.js
All: ionicons.js
*/

Then you already can use component in your template, component tag is same with filename with adding -icon in postfix.

Example:

<ios-add-circle-outline-icon />
<ios-add-circle-icon />

<md-add-circle-outline-icon />
<md-add-circle-icon />

🔥 API and Props

Name	Type	Default	Description
w	String	14px	Width of SVG
h	String	14px	Height of SVG
rootClass	String	`empty`	Class for wrapper SVG
animate	String	`empty`	Available: `rotate`, `shake`, `beat`

🏃 Development

Checkout with submodule :

git clone [email protected]:mazipan/vue-ionicons.git
git submodule init
git submodule update --remote

Run demo

npm run dev

Build demo

npm run build

Build new distribute icon

npm run dist

👍 Tips

Use resolve in your Webpack config to clean up the imports:
```
resolve: {
  alias : {
    "icons": path.resolve(__dirname, "node_modules/vue-ionicons/dist")
  }
}
```
This will give you much shorter and more readable imports, like import Android from 'icons/android', rather than import Android from 'vue-ionicons/dist/android.vue'. Much better!

💵 Credits

Ionicons project by @Ionic-Team.
Vue Material Design Icons by @robcresswell.

Support me

Via trakteer
Direct support, send me an email

🎁 Contributing

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

vue-ionicons's People

Contributors

Stargazers

Watchers

Forkers

vue-ionicons's Issues

Global import set, what component to use?

Maybe I'm being thick..

But the docs don't mention what the component tag names are when you important entire sets using vue.use()

<ios-menu-icon/>

I would have thought something like the above?

Ability to change component title?

I want to be able to change component title because it appears as a tooltip on hover as shown in this screenshot. Tried to add a title attribute but it was overridden by the default title of the component.

<send-icon title="Send" />

Remove too much gradient

After revisited the demo page, I feel too many gradient was not good for our page.
Make it more cleaner with less gradient.
Gradient only for header and maybe some of card.
Remove gradient in icon box

Logo Ionicons in demo page 404

Please check, find another resources or better to remove if not found

failed

follow the guide
there is a compile error on import AlertIcon from 'vue-ionicons/alert.vue'

Sizing by attribute should be optional.

Sizing by width / height makes styling by css difficult; also icons don't scale with user style sheets.

width/height bindings should be optional, and the base style be something like:

.ion__svg {
    overflow: visible;
    display: inline-block;
    height: 1em; /* possibly tweaked so icons match typical font x-heights; I use 1.1em along with margin-top: .05em */
    font-size: inherit;
}

How to change icon color?

Example is not explaining that

https://mazipan.github.io/vue-ionicons/

Problems with @click binding methods

When you bind an click Event on the Icons you get the following error message:

`
Property or method "del_User" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in
`

Take for example ios-calendar-outline

Many thanks

Combo box not showing well

Combo box in demo page failed to show it's value.
Please check it