All Projects → Justineo → Vue Octicon

Justineo / Vue Octicon

Licence: mit
Octicon component for Vue.js, using inline SVG.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Octicon

Pixo
Convert SVG icons into React components
Stars: ✭ 371 (+187.6%)
Mutual labels:  svg, icon
Yii2 Widget Rating
A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets)
Stars: ✭ 47 (-63.57%)
Mutual labels:  svg, icon
Vue Svg Icon
a solution for multicolor svg icons in vue2.0 (vue2.0的可变彩色svg图标方案)
Stars: ✭ 553 (+328.68%)
Mutual labels:  svg, icon
Vue Awesome
Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.
Stars: ✭ 2,302 (+1684.5%)
Mutual labels:  svg, icon
Icotar
A free colorful icon avatar generator.
Stars: ✭ 94 (-27.13%)
Mutual labels:  svg, icon
Remixicon
Open source neutral style icon system
Stars: ✭ 3,956 (+2966.67%)
Mutual labels:  svg, icon
Ruby Gem Downloads Badge
Clean and simple gem downloads count badge, courtesy of http://shields.io/. You can checkout the application directly at the following URL:
Stars: ✭ 29 (-77.52%)
Mutual labels:  svg, icon
Svgicon
SVG icon components and tool set
Stars: ✭ 817 (+533.33%)
Mutual labels:  svg, icon
Linearicons
Linearicons is the highest quality set of line icons, matching with minimalist UI designs in iOS.
Stars: ✭ 64 (-50.39%)
Mutual labels:  svg, icon
Fontello Svg
Generate SVG icons from a Fontello icon set.
Stars: ✭ 59 (-54.26%)
Mutual labels:  svg, icon
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (+49.61%)
Mutual labels:  svg, icon
Sb
SVG badges to display
Stars: ✭ 99 (-23.26%)
Mutual labels:  svg, icon
Akar Icons
A perfectly rounded icon library made for designers, developers, and pretty much everyone.
Stars: ✭ 184 (+42.64%)
Mutual labels:  svg, icon
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+3717.05%)
Mutual labels:  svg, icon
React Icomoon
It allows you to simply view the icons in the selection.json file provided by Icomoon.
Stars: ✭ 48 (-62.79%)
Mutual labels:  svg, icon
Icons
The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
Stars: ✭ 99 (-23.26%)
Mutual labels:  svg, icon
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+8317.05%)
Mutual labels:  svg, icon
Simple Icons
SVG icons for popular brands
Stars: ✭ 12,090 (+9272.09%)
Mutual labels:  svg
Flagpack Core
Flagpack contains 260+ easily implementable flag icons to use in your design or code project.
Stars: ✭ 127 (-1.55%)
Mutual labels:  svg
Nuxt Svg Loader
SVGs as components, also on the server side!
Stars: ✭ 125 (-3.1%)
Mutual labels:  svg

Vue-Octicon

Octicon component for Vue.js, using inline SVG.

Vue-Octicon is built upon Octicons v5.0.1 and depends on Vue.js v2.0.1+.

Installation

NPM (Recommended)

$ npm install vue-octicon

bower

$ bower install vue-octicon

manual

Just download dist/vue-octicon.js and include it in your HTML file:

<script src="path/to/vue-octicon/dist/vue-octicon.js"></script>

Usage

<!-- basic -->
<octicon name="repo"></octicon>

<!-- with options -->
<octicon name="sync" scale="2" spin></octicon>
<octicon name="comment" flip="horizontal"></octicon>
<octicon name="repo-forked" label="Forked Repository"></octicon>

ES Modules with NPM & vue-loader (Recommended)

import Vue from 'vue'
import Octicon from 'vue-octicon/components/Octicon.vue'

// Pick one way betweem the 2 following ways

// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'

// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'

Heads up

if you are using vue-cli to create your project, the webpack template may exclude node_modules from files to be transpiled by Babel. Change the exclude value from /node_modules/ to /node_modules(?![\\/]vue-octicon[\\/])/ to fix the problem.**

CommonJS with NPM without ES Next support

var Vue = require('vue')

// requiring the UMD module
var Octicon = require('vue-octicon')

// or with vue-loader you can require the src directly
var Octicon = require('vue-octicon/components/Octicon.vue')

// register component to use

AMD

require.config({
  paths: {
    'vue-octicon': 'path/to/vue-octicon'
  }
})

require(['vue-octicon'], function (Octicon) {
  // register component to use...
})

Global variable

The component class is exposed as window.VueOcticon.

Local development

$ npm i
$ npm run dev

Open http://localhost:8080/demo to see the demo.

Updating icons

Don't touch files in src/icons but update assets/icons.json instead and run npm run icons to re-generate icon module files.

Registering custom icons

You can register custom icons like this:

// ES Modules with vue-loader
import Octicon from 'vue-octicon/src/components/Octicon.vue'

Octicon.register({
  taobao: {
    width: 16,
    height: 12.268,
    d: 'M2.786,2.795 C3.580,2.795 4.223,2.223 4.223,1.509 C4.223,0.804 3.580,0.223 2.786,0.223 C1.991,0.223 1.348,0.804 1.348,1.509 C1.348,2.223 1.991,2.795 2.786,2.795 L2.786,2.795 Z M1.589,3.321 L0.688,4.705 L2.357,5.750 C2.357,5.750 3.473,6.313 2.946,7.384 C2.446,8.393 0.018,10.607 0.018,10.607 L2.196,11.964 C3.696,8.696 3.607,9.134 3.982,7.955 C4.366,6.759 4.455,5.839 3.795,5.179 C2.946,4.330 2.848,4.250 1.589,3.321 L1.589,3.321 Z M15.714,2.955 C15.714,2.955 15.250,-0.723 7.196,1.554 C7.536,0.955 7.705,0.563 7.705,0.563 L5.696,0.000 C5.696,0.000 4.884,2.643 3.438,3.884 C3.438,3.884 4.839,4.688 4.821,4.661 C5.223,4.268 5.580,3.857 5.893,3.464 C6.214,3.321 6.527,3.188 6.830,3.063 C6.455,3.741 5.857,4.741 5.250,5.375 L6.098,6.116 C6.098,6.116 6.679,5.554 7.313,4.884 L8.027,4.884 L8.027,6.125 L5.223,6.125 L5.223,7.107 L8.027,7.107 L8.027,9.482 C7.991,9.473 7.955,9.473 7.920,9.473 C7.616,9.455 7.125,9.411 6.946,9.107 C6.714,8.750 6.884,8.080 6.893,7.670 L4.955,7.670 L4.884,7.705 C4.884,7.705 4.179,10.884 6.938,10.813 C9.509,10.884 10.991,10.098 11.696,9.554 L11.982,10.607 L13.571,9.946 L12.491,7.313 L11.205,7.705 L11.446,8.616 C11.116,8.857 10.732,9.045 10.321,9.179 L10.321,7.107 L13.054,7.107 L13.054,6.125 L10.321,6.125 L10.321,4.884 L13.071,4.884 L13.071,3.902 L8.188,3.902 C8.536,3.473 8.813,3.080 8.893,2.830 L8.036,2.598 C11.688,1.295 13.723,1.518 13.705,3.661 L13.705,9.304 C13.705,9.304 13.920,11.241 11.696,11.107 L10.500,10.848 L10.214,11.991 C10.214,11.991 15.402,13.464 15.821,9.482 C16.250,5.491 15.714,2.955 15.714,2.955 L15.714,2.955 Z'
  }
})

Related projects

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].