Exciting release!Introducing "safe npm". Learn more →
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


Shared tools for interal use, supporting the development of the Bliss Design System Component Toolkit.


Version published
Weekly downloads
decreased by-17.21%

Weekly downloads




Shared tools for interal use, supporting the development of the Bliss Design System Component Toolkit.

  • Installation
  • Usage
  • Troubleshooting

📦 Installation

To install this component, run:

yarn add @bliss-design-system/shared

🏎 Usage

⚠️ All of the tooling below is explicitly to support components built by Bliss.

As we develop this list will likely grow, but at the moment the mixins below support the base structure for some Bliss components.


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 ✨.


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
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc