@vanillawc/wc-icon-rule

A spicy horizontal rule

Usage no npm install needed!

<script type="module">
  import vanillawcWcIconRule from 'https://cdn.skypack.dev/@vanillawc/wc-icon-rule';
</script>

README

<wc-icon-rule> Horizontal Rule with Visual Appeal

GitHub Releases NPM Releases Bundlephobia Latest Status Release Status

Discord Published on WebComponents.org

Installation

Installation

npm i @vanillawc/wc-icon-rule

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-icon-rule/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-icon-rule@1/index.js"></script>

Demo

Try it on WebComponents.dev

Usage

Custom Styles

  • --width - width of the icon (default 32px)
  • --height - height of the icon (default 32px)
  • --space-around - space around the icon (default 1em)
  • --hr-width - horizontal rule width (default 1px)
  • --hr-style - horizontal rule style (default solid)
  • --hr-color - horizontal rule color (default black)

Basic Usage

Add the icon as a child of the element

  <wc-icon-rule>
    <img src="twitter.svg" alt="">
  </wc-icon-rule>

Note: While this is intended for use with icons, the icon can be any element that accepts display: inline-block

Contributing

See CONTRIBUTING.md