Octicons as Web Components?

[pmeinhardt]

Hi 👋 First of all, thanks for publishing this great icon set. 💚

I was wondering why there's no Web Component package for Octicons.
After all GitHub seems to be using Web Components a lot. 🤔

I am only getting started with these, but I was able to quickly throw together a working version:

import octicons from '@primer/octicons';
import { css, customElement, html, LitElement, property } from 'lit-element';

const validAlign = {
  middle: true,
  'text-bottom': true,
  'text-top': true,
  unset: true,
};

@customElement('gh-octicon')
class Octicon extends LitElement {
  @property({ type: String, reflect: true })
  icon;

  @property({ type: Number, reflect: true })
  width = 16;

  @property({ type: Number, reflect: true })
  height = 16;

  @property({ type: String, reflect: true, attribute: 'vertical-align' })
  verticalAlign = 'text-bottom';

  static get styles() {
    return css`
      svg {
        display: inline-block;
        fill: currentcolor;
        user-select: none;
      }
    `;
  }

  render() {
    const octicon = octicons[this.icon];

    const align = validAlign[this.verticalAlign]
      ? this.verticalAlign
      : 'text-bottom';

    const options = {
      width: this.width,
      height: this.height,
      style: `vertical-align: ${align}`,
    };

    return html([octicon.toSVG(options)]);
  }
}

export default Octicon;

Before I spend time and open a PR I'd like to know whether there's any interest in this at all and whether you'd be open for such a proposal? Or maybe there's a reason you decided not to go down this route in which case I'd be curious to know. 💭 🙂

Kind regards,
Paul

[colebemis]

Hi @pmeinhardt 👋 We're currently using a custom ViewComponent to render Octicons in our Rails codebase and we use our Octicons React components in our React projects, so we don't need a web components implementation of Octicons right now. If that changes, we'll revisit this issue.