v-github-icon

⚠️ Docs are for Vue 3, for Vue 2 docs, check this tree

Features

• GitHub corners made easy!
• Built from scratch usign Vue 3
• For Vue 3.x version – pnpm add v-github-icon
• For Vue 2.x version – pnpm add v-github-icon@1 && pnpm add -D @vue/composition-api

Table of Contents

• v-github-icon
  • Features
  • Table of Contents
  • Demo
  • Requirements
    • Installation
    • Build Setup
  • Usage
    • Nuxt
    • HTML
    • JS
    • HTML
    • JS
  • API
    • Props
  • Built with
  • Contributing
  • Author

Demo

Requirements

• Vue ^3.x

Installation

pnpm add v-github-icon

CDN: UNPKG | jsDelivr

Build Setup

# install dependencies
$ pnpm install

# package the library
$ pnpm run build

Usage

Register the component globally:

// main.ts
import { VGithubIcon } from 'v-github-icon';
import { createApp } from 'vue';

const app = createApp({});
app.component('VGithubIcon', VGithubIcon);

Or use locally

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

Nuxt

For Nuxt 3, create a file in plugins/v-github-icon.ts

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VGithubIcon', VGithubIcon);

then import the file in nuxt.config.{j|t}s:

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/v-github-icon', mode: 'client' },
    // ...
  ],
  // ...
};

Example 1 (refer App.vue)

HTML

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

JS

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { VGithubIcon } from 'v-github-icon';

  export default defineComponent({
    components: {
      VGithubIcon,
    },
    setup() {
      const state = ref({
        position: 'top-left',
        url: 'https://github.com/vinayakkulkarni/v-github-icon',
        bgColor: '#FFF',
        fillColor: '#111',
      });

      return {
        state,
      };
    },
  });
</script>

Example 2 (minimal)

HTML

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

JS

<script lang="ts">
  import { defineComponent } from 'vue';
  import { VGithubIcon } from 'v-github-icon';

  export default defineComponent({
    name: 'App',
    components: {
      VGithubIcon,
    },
  });
</script>

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

• TypeScript.
• Vue 2

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