Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinayakkulkarni/v-github-icon
GitHub corner Icons built using Vue 🥳
https://github.com/vinayakkulkarni/v-github-icon
github-icon typescript vue3
Last synced: 3 months ago
JSON representation
GitHub corner Icons built using Vue 🥳
- Host: GitHub
- URL: https://github.com/vinayakkulkarni/v-github-icon
- Owner: vinayakkulkarni
- License: mit
- Created: 2020-05-18T19:45:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-10T20:00:17.000Z (10 months ago)
- Last Synced: 2024-04-14T09:51:39.090Z (10 months ago)
- Topics: github-icon, typescript, vue3
- Language: Vue
- Homepage: https://v-github-icon.netlify.app/
- Size: 75.2 MB
- Stars: 5
- Watchers: 4
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# [v-github-icon](https://vinayakkulkarni.github.io/v-github-icon/) :octocat:
[](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/ci.yml)
[](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/codeql.yml)
[](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/shipjs-trigger.yml)
[](https://github.com/vinayakkulkarni/v-github-icon/releases)
[](https://www.npmjs.com/package/v-github-icon)
[](https://deepscan.io/dashboard#view=project&tid=9055&pid=18487&bid=453975)
[](https://snyk.io/test/github/vinayakkulkarni/v-github-icon)
[](https://app.netlify.com/sites/v-github-icon/deploys)
[](https://github.com/vinayakkulkarni/v-github-icon/graphs/contributors)
[](https://github.com/vinayakkulkarni/v-github-icon/blob/main/package.json)
[](http://npm-stat.com/charts.html?package=v-github-icon)
[](http://npm-stat.com/charts.html?package=v-github-icon)
[](https://bundlephobia.com/package/v-github-icon@latest)
[](https://github.com/vinayakkulkarni/janak)
[](https://vuejs.org/)
[](https://vitejs.dev)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://www.typescriptlang.org/)
⚠️ Docs are for Vue 3, for Vue 2 docs, check [this tree](https://github.com/vinayakkulkarni/v-github-icon/tree/v2.6.1#readme)
## 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
- [v-github-icon :octocat:](#v-github-icon-octocat)
- [Features](#features)
- [Table of Contents](#table-of-contents)
- [Demo](#demo)
- [Requirements](#requirements)
- [Installation](#installation)
- [Build Setup](#build-setup)
- [Usage](#usage)
- [Nuxt](#nuxt)
- [HTML](#html)
- [JS](#js)
- [HTML](#html-1)
- [JS](#js-1)
- [API](#api)
- [Props](#props)
- [Built with](#built-with)
- [Contributing](#contributing)
- [Author](#author)
## Demo
[](https://stackblitz.com/edit/v-github-icon?file=src/App.vue)
## Requirements
- [Vue](https://vuejs.org/) `^3.x`
### Installation
```sh
npm install --save v-github-icon
```
CDN: [UNPKG](https://unpkg.com/v-github-icon/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-github-icon/dist/)
### Build Setup
```bash
# install dependencies
$ npm install
# package the library
$ npm run build
```
## Usage
Register the component globally:
```js
// main.ts
import { VGithubIcon } from 'v-github-icon';
import { createApp } from 'vue';
const app = createApp({});
app.component('VGithubIcon', VGithubIcon);
```
Or use locally
```javascript
import { VGithubIcon } from 'v-github-icon';
```
### Nuxt
For Nuxt 3, create a file in `plugins/v-github-icon.ts`
```js
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`:
```js
export default {
// ...
plugins: [
// ...
{ src: '~/plugins/v-github-icon', mode: 'client' },
// ...
],
// ...
};
```
Example 1 (refer App.vue)
### HTML
```html
```
### JS
```javascript
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,
};
},
});
```
Example 2 (minimal)
### HTML
```html
```
### JS
```javascript
import { defineComponent } from 'vue';
import { VGithubIcon } from 'v-github-icon';
export default defineComponent({
name: 'App',
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
- [TypeScript](https://www.typescriptlang.org/).
- [Vue 2](https://v3.vuejs.org)
## Contributing
1. Fork it ( [https://github.com/vinayakkulkarni/v-github-icon/fork](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](https://github.com/vinayakkulkarni/v-github-icon/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-github-icon** © [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-github-icon/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)