vue-octicons
A GitHub Octicons component for Vue.js.
Quick Note: This is my first NPM package, and I'm a PHP developer primarily. I needed this for an application and couldn't get Justineo/vue-octicon to work for me. I used the webpack template for VueJS, and while there are e2e and unit tests, these are currently just the sample tests that came with the template. Any suggestions and contributions are greatly appreciated.
TRY Justineo/vue-octicon FIRST!
Installation
NPM
npm install vue-octicons
Loading the component
// Registers the component globally.Vue;
Using the component
The <octicon>
component will output an <svg>
tag. In order for an icon to appear
you must include icon-name
attribute. The icon name much match the
symbol of an octicon.
By default the following attributes are set on the <svg>
tag:
version="1.1"
aria-hidden="true"
role="presentation"
By default the the following classes are added to the class
attribute of
the <svg>
tag:
octicon
octicon-[icon name]
In an effort to keep the usage of octicons similar to the usage of FontAwesome
icons the height
, width
and viewBox
attributes are calculated based on the
container's font size.
The viewBox
attribute is set to '0 0 svg-width svg-height'
. The svg-width and
height are the dimensions of the icon within the svg path.
The height
attribute is set to the font-height
of the <svg>
.
The width
attribute is calculated multiplying height
by the aspect ratio of the
icon.
width = height * svg-width / svg-height;
Build Setup
# serve with hot reload at localhost:8080npm run dev# build demo with minificationnpm run build# build demo and view the bundle analyzer reportnpm run build --report# run unit tests - currently just template sample tests.npm run unit# run e2e tests - currently just template sample tests.npm run e2e# run all tests - currently just template sample tests.npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.