wc-github-corners

从零开始写一个 Web Component - GitHub Corners | 云游君的小站

A web component by lit for GitHub Corners.

The final product is an ES module, and it can be used alone.

Anywhere like Vanilla JS / Vue / React / Angular / Svelte ...

Demo

Usage

npm i wc-github-corners

By CDN

See demo/index.html.

• jsdelivr: https://cdn.jsdelivr.net/npm/wc-github-corners@latest
• unpkg: https://www.unpkg.com/wc-github-corners@latest

<script
  type="module"
  src="https://www.unpkg.com/wc-github-corners@latest"
></script>

<github-corners></github-corners>

By NPM

// main.ts
import 'wc-github-corners'

<github-corners></github-corners>

I successfully used it in a vue project - char-dust.

API

Example

<github-corners fill="#0078e7" position="left" reverse></github-corners>

src/index.ts:

class: GitHubCorners

Superclass

Fields

I written it as a tutorial in my Bilibili Live Room.

Thanks to my fans and sponsors.

FAQ

[Vue warn]: Failed to resolve component: github-corners

If you write it in vue template, you should make sure to exclude it from component resolution via compilerOptions.isCustomElement.

In vite:

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/],
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return ['github-corners'].includes(tag)
          },
        },
      },
    }),
  ],
})

Want to use by CDN in vue?

Try @vueuse/head.

<script setup lang="ts">
  import { useHead } from "@vueuse/head";

  useHead({
    script: [
      {
        src: "https://cdn.jsdelivr.net/npm/wc-github-corners@latest",
        type: "module",
      },
    ],
  });
</script>

Sponsors