The IconMixin is designed for components that depend on the usage of the @bliss-design-system/icon. Given the nature of the icon component, we cannot access the icons through another component, and this mixin will 'bake' the desired icon into the component you're building.

The mixin exposes two functions and one variable:

setIcon: To set the icon passed to your component
setSVGSymbol: To fetch the SVG that is represented by that icon
this.icon: The string provided to the icon attribute

import { IconMixin } from '@bliss-design-system/shared'
import { html, LitElement, TemplateResult, PropertyValues} from 'lit-element'

class BlissExample extends IconMixin(LitElement) {
  public firstUpdated(changed: PropertyValues) {
    super.firstUpdated(changed);
    super.setIcon();
  }

  protected render(): TemplateResult {
    return html`
      <div>
        <bliss-icon name='${this.icon}'></bliss-icon>
        ${super.setSVGSymbol}
      </div>
    `
  }
}

customElements.define('bliss-example', BlissExample);

// Usage
<bliss-example icon='rocket'>Start building</bliss-example>

🫕 Contributing

We'd prefer to keep this internal package contribution-free while we work out how exactly we use it and what kinds of tools will live here. That is subject to change in the future though, so feel free to open an issue with any questions you may have in the meantime.

🙃 Troubleshooting

We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via bliss@bryter.io or via the #bliss_support Slack channel ✨.

FAQs

What is @bliss-design-system/shared?

Is @bliss-design-system/shared popular?

Is @bliss-design-system/shared well maintained?

Last updated on 17 Aug 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket