Install
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.component('octicon', require('vue-octicons/src/components/Octicon.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:
octiconocticon-[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.
