{"id":18283330,"url":"https://github.com/vinayakkulkarni/v-github-icon","last_synced_at":"2025-04-05T07:30:33.555Z","repository":{"id":36988832,"uuid":"265044756","full_name":"vinayakkulkarni/v-github-icon","owner":"vinayakkulkarni","description":"GitHub corner Icons built using Vue 🥳","archived":false,"fork":false,"pushed_at":"2024-04-10T20:00:17.000Z","size":78893,"stargazers_count":5,"open_issues_count":10,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-14T09:51:39.090Z","etag":null,"topics":["github-icon","typescript","vue3"],"latest_commit_sha":null,"homepage":"https://v-github-icon.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinayakkulkarni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-05-18T19:45:08.000Z","updated_at":"2024-05-19T12:00:07.445Z","dependencies_parsed_at":"2023-12-18T02:25:25.561Z","dependency_job_id":"1db42334-1cd1-452e-bc82-ce8e1885d514","html_url":"https://github.com/vinayakkulkarni/v-github-icon","commit_stats":{"total_commits":947,"total_committers":4,"mean_commits":236.75,"dds":"0.12038014783526929","last_synced_commit":"68563c542f05659cd00325ed10b4c826c58e357c"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-github-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-github-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-github-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-github-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinayakkulkarni","download_url":"https://codeload.github.com/vinayakkulkarni/v-github-icon/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305126,"owners_count":20917191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-icon","typescript","vue3"],"created_at":"2024-11-05T13:08:51.909Z","updated_at":"2025-04-05T07:30:33.038Z","avatar_url":"https://github.com/vinayakkulkarni.png","language":"Vue","readme":"# [v-github-icon](https://vinayakkulkarni.github.io/v-github-icon/) :octocat:\n\n\n\u003c!-- Badges --\u003e\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-github-icon/ci.yml?logo=github-actions)](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/ci.yml)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-github-icon/codeql.yml?logo=lgtm\u0026logoWidth=18)](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/codeql.yml)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-github-icon/shipjs-trigger.yml?label=⛴%20Ship.js%20trigger)](https://github.com/vinayakkulkarni/v-github-icon/actions/workflows/shipjs-trigger.yml)\n[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/vinayakkulkarni/v-github-icon?sort=semver\u0026logo=github)](https://github.com/vinayakkulkarni/v-github-icon/releases)\n[![npm](https://img.shields.io/npm/v/v-github-icon?sort=semver\u0026logo=npm)](https://www.npmjs.com/package/v-github-icon)\n[![DeepScan grade](https://deepscan.io/api/teams/9055/projects/18487/branches/453975/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=9055\u0026pid=18487\u0026bid=453975)\n[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/vinayakkulkarni/v-github-icon)](https://snyk.io/test/github/vinayakkulkarni/v-github-icon)\n[![Netlify](https://img.shields.io/netlify/341e9f45-256e-4ad0-9f7f-b948b60f4e99?logo=netlify)](https://app.netlify.com/sites/v-github-icon/deploys)\n[![GitHub contributors](https://img.shields.io/github/contributors/vinayakkulkarni/v-github-icon)](https://github.com/vinayakkulkarni/v-github-icon/graphs/contributors)\n[![npm type definitions](https://img.shields.io/npm/types/v-github-icon?logo=typescript)](https://github.com/vinayakkulkarni/v-github-icon/blob/main/package.json)\n[![npm](https://img.shields.io/npm/dt/v-github-icon?logo=npm)](http://npm-stat.com/charts.html?package=v-github-icon)\n[![npm](https://img.shields.io/npm/dw/v-github-icon?logo=npm)](http://npm-stat.com/charts.html?package=v-github-icon)\n[![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/v-github-icon)](https://bundlephobia.com/package/v-github-icon@latest)\n\n[![built using janak](https://img.shields.io/badge/built%20using-janak-brightgreen)](https://github.com/vinayakkulkarni/janak)\n[![vue](https://img.shields.io/npm/dependency-version/v-github-icon/dev/vue?logo=vue.js)](https://vuejs.org/)\n[![vite](https://img.shields.io/github/package-json/dependency-version/vinayakkulkarni/v-github-icon/dev/vite?logo=vite)](https://vitejs.dev)\n[![eslint](https://img.shields.io/github/package-json/dependency-version/vinayakkulkarni/v-github-icon/dev/eslint?logo=eslint)](https://eslint.org/)\n[![prettier](https://img.shields.io/github/package-json/dependency-version/vinayakkulkarni/v-github-icon/dev/prettier?logo=prettier)](https://prettier.io/)\n[![typescript](https://img.shields.io/github/package-json/dependency-version/vinayakkulkarni/v-github-icon/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)\n\n⚠️ Docs are for Vue 3, for Vue 2 docs, check [this tree](https://github.com/vinayakkulkarni/v-github-icon/tree/v2.6.1#readme)\n\n## Features\n\n- GitHub corners made easy!\n- Built from scratch usign Vue 3\n- For Vue 3.x version – `npm i v-github-icon`\n- For Vue 2.x version – `npm i v-github-icon@1 \u0026\u0026 npm i -D @vue/composition-api`\n\n## Table of Contents\n\n- [v-github-icon :octocat:](#v-github-icon-octocat)\n  - [Features](#features)\n  - [Table of Contents](#table-of-contents)\n  - [Demo](#demo)\n  - [Requirements](#requirements)\n    - [Installation](#installation)\n    - [Build Setup](#build-setup)\n  - [Usage](#usage)\n    - [Nuxt](#nuxt)\n    - [HTML](#html)\n    - [JS](#js)\n    - [HTML](#html-1)\n    - [JS](#js-1)\n  - [API](#api)\n    - [Props](#props)\n  - [Built with](#built-with)\n  - [Contributing](#contributing)\n  - [Author](#author)\n\n## Demo\n\n[![Edit v-github-icon](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/v-github-icon?file=src/App.vue)\n\n## Requirements\n\n- [Vue](https://vuejs.org/) `^3.x`\n\n### Installation\n\n```sh\nnpm install --save v-github-icon\n```\n\nCDN: [UNPKG](https://unpkg.com/v-github-icon/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-github-icon/dist/)\n\n### Build Setup\n\n```bash\n# install dependencies\n$ npm install\n\n# package the library\n$ npm run build\n```\n\n## Usage\n\nRegister the component globally:\n\n```js\n// main.ts\nimport { VGithubIcon } from 'v-github-icon';\nimport { createApp } from 'vue';\n\nconst app = createApp({});\napp.component('VGithubIcon', VGithubIcon);\n```\n\nOr use locally\n\n```javascript\nimport { VGithubIcon } from 'v-github-icon';\n```\n\n### Nuxt\n\nFor Nuxt 3, create a file in `plugins/v-github-icon.ts`\n\n```js\nimport { VGithubIcon } from 'v-github-icon';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.component('VGithubIcon', VGithubIcon);\n```\n\nthen import the file in `nuxt.config.{j|t}s`:\n\n```js\nexport default {\n  // ...\n  plugins: [\n    // ...\n    { src: '~/plugins/v-github-icon', mode: 'client' },\n    // ...\n  ],\n  // ...\n};\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\n\u003cem\u003eExample 1 (\u003ca href=\"examples/src/App.vue\"\u003erefer App.vue\u003c/a\u003e)\u003c/em\u003e\n\u003c/summary\u003e\n\n### HTML\n\n```html\n\u003cv-github-icon\n  :position=\"position\"\n  :url=\"url\"\n  :bg-color=\"bgColor\"\n  :fill-color=\"fillColor\"\n/\u003e\n```\n\n### JS\n\n```javascript\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent, ref } from 'vue';\n  import { VGithubIcon } from 'v-github-icon';\n\n  export default defineComponent({\n    components: {\n      VGithubIcon,\n    },\n    setup() {\n      const state = ref({\n        position: 'top-left',\n        url: 'https://github.com/vinayakkulkarni/v-github-icon',\n        bgColor: '#FFF',\n        fillColor: '#111',\n      });\n\n      return {\n        state,\n      };\n    },\n  });\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n\u003cem\u003eExample 2 (minimal)\u003c/em\u003e\n\u003c/summary\u003e\n\n### HTML\n\n```html\n\u003cv-github-icon url=\"https://github.com/vinayakkulkarni/v-github-icon\" /\u003e\n```\n\n### JS\n\n```javascript\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent } from 'vue';\n  import { VGithubIcon } from 'v-github-icon';\n\n  export default defineComponent({\n    name: 'App',\n    components: {\n      VGithubIcon,\n    },\n  });\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## API\n\n### Props\n\n| Name         | Type   | Required? | Description                                         |\n| ------------ | ------ | --------- | --------------------------------------------------- |\n| `url`        | String | Yes       | The URL link to GitHub project repository           |\n| `position`   | String | No        | Position of the icon, `'top-left'` or `'top-right'` |\n| `bg-color`   | String | No        | Color of the octocat                                |\n| `fill-color` | String | No        | Color excluding the octocat                         |\n\n## Built with\n\n- [TypeScript](https://www.typescriptlang.org/).\n- [Vue 2](https://v3.vuejs.org)\n\n## Contributing\n\n1. Fork it ( [https://github.com/vinayakkulkarni/v-github-icon/fork](https://github.com/vinayakkulkarni/v-github-icon/fork) )\n2. Create your feature branch (`git checkout -b feat/new-feature`)\n3. Commit your changes (`git commit -Sam 'feat: add feature'`)\n4. Push to the branch (`git push origin feat/new-feature`)\n5. Create a new [Pull Request](https://github.com/vinayakkulkarni/v-github-icon/compare)\n\n_Note_:\n\n1. Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow/)\n2. Commits \u0026 PRs will be allowed only if the commit messages \u0026 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)_\n3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_\n\n## Author\n\n**v-github-icon** \u0026copy; [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-github-icon/contributors)).\n\n\u003e [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\\_vinayak_k](https://twitter.com/_vinayak_k)\n","funding_links":[],"categories":["UI Utilities [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-github-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinayakkulkarni%2Fv-github-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-github-icon/lists"}