v-github-icon
v3.2.2
Published
Vue + GitHub Icon ❤️
Downloads
451
Maintainers
Readme
v-github-icon :octocat:
⚠️ 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 –
npm i v-github-icon
- For Vue 2.x version –
npm i v-github-icon@1 && npm i -D @vue/composition-api
Table of Contents
Demo
Requirements
- Vue
^3.x
Installation
npm install --save v-github-icon
Build Setup
# install dependencies
$ npm install
# package the library
$ npm 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' },
// ...
],
// ...
};
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>
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
Contributing
- Fork it ( https://github.com/vinayakkulkarni/v-github-icon/fork )
- Create your feature branch (
git checkout -b feat/new-feature
) - Commit your changes (
git commit -Sam 'feat: add feature'
) - Push to the branch (
git push origin feat/new-feature
) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- 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