v-github-icon

Vue + GitHub Icon ❤️

Usage no npm install needed!

<script type="module">
  import vGithubIcon from 'https://cdn.skypack.dev/v-github-icon';
</script>

README

v-github-icon :octocat:

GitHub Workflow Status GitHub Workflow Status GitHub release (latest SemVer) npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo Total alerts Language grade: JavaScript GitHub contributors

built using janak eslint prettier rollup vue typescript

Features

  • GitHub corners made easy!
  • Built from scratch usign Vue 2 & Composition API with TypeScript
  • For Vue 2.x version – npm i v-github-icon@latest
  • For Vue 3.x version – npm i v-github-icon@next

Table of Contents

Demo

Edit v-github-icon demo

Requirements

Installation

npm install --save v-github-icon
npm install --save-dev @vue/composition-api

CDN: UNPKG | jsDelivr (available as window.VOffline)

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Usage

Register the component globally:

Vue.component('VGithubIcon', require('v-github-icon'));

Or use locally

import VGithubIcon from 'v-github-icon';
Example 1 (refer App.vue)

HTML

  <v-github-icon
    :position="position"
    :url="url"
    :bg-color="bgColor"
    :fill-color="fillColor"
  />

JS

import { VGithubIcon } from 'v-github-icon';

Vue.component('example-component', {
  components: {
    VGithubIcon,
  },
  data: () => ({
    position: 'top-left',
    url: 'https://github.com/vinayakkulkarni/v-pip',
    bgColor: '#FFF',
    fillColor: '#111',
  }),
});
Example 2 (minimal)

HTML

  <v-github-icon url="https://github.com/vinayakkulkarni/v-pip" />

JS

import { VGithubIcon } from 'v-github-icon';

Vue.component('example-component', {
  components: {
    VGithubIcon,
  },
});

API

Props

Name Type Required? Description
url String Yes The URL link to GitHub project repository
position String No Position of the icon, 'top-left' or 'top-right'
bg-color String No Color of the octocat
fill-color String No Color excluding the octocat

Built with

Contributing

  1. Fork it ( https://github.com/vinayakkulkarni/v-github-icon/fork )
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

v-github-icon © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k