https://github.com/moehmeni/viconly

Vue component for a free and nice-looking icon pack, Iconly.
https://github.com/moehmeni/viconly

icon-font icon-pack iconly icons vue vue-icons

Last synced: 16 days ago
JSON representation

Vue component for a free and nice-looking icon pack, Iconly.

• Host: GitHub
• URL: https://github.com/moehmeni/viconly
• Owner: moehmeni
• License: mit
• Created: 2022-04-11T12:27:39.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-30T07:58:12.000Z (over 2 years ago)
• Last Synced: 2024-11-05T21:26:16.745Z (2 months ago)
• Topics: icon-font, icon-pack, iconly, icons, vue, vue-icons
• Language: CSS
• Homepage:
• Size: 472 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Viconly

Vue.js component wrapper for a free and nice-looking icon pack, [Iconly](https://piqodesign.gumroad.com/l/iconly).

You can see all the styles and names [here](https://amirrezajef.ir/iconly/demo.html)



## Installation

```bash

yarn add viconly

```

## Usage

Declare the component globally

```js

import Viconly from 'viconly'

Vue.component('ic', Viconly)

```

then in your `.vue` template

```vue

```

or with more customizations

```vue

```

You can either use `broken`, `bold`, or `bulk` for the icon style while the default style is __light__.

## Nuxt usage

You can use Viconly component globally using Nuxt [plugins directory](https://nuxtjs.org/docs/directory-structure/plugins/).

create a `viconly.js` in `plugins` directory of your Nuxt project (create the directory itself if it doesn't exist) then declare the component and CSS styles in `nuxt.config.js`.

`/plugins/viconly.js`

```js

import Vue from 'vue'

import Viconly from 'viconly'

Vue.component('ic', Viconly)

```

`nuxt.config.js`

```js

plugins: [

  { src: "@/plugins/viconly.js" },

],

css: [

  "viconly/src/iconly/style.css",

  "viconly/src/iconly/bulk-style.css",

],

```

After this you're able to use the `ic` (or whatever you named it) component globally in any of your Nuxt project templates.