https://github.com/vanillawc/wc-icon-rule

A spicy horizonal rule
https://github.com/vanillawc/wc-icon-rule

design vanilla web-components

Last synced: about 1 month ago
JSON representation

A spicy horizonal rule

• Host: GitHub
• URL: https://github.com/vanillawc/wc-icon-rule
• Owner: vanillawc
• License: mit
• Created: 2020-01-26T07:04:38.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-05-15T18:41:06.000Z (over 3 years ago)
• Last Synced: 2024-12-05T12:46:46.340Z (about 2 months ago)
• Topics: design, vanilla, web-components
• Language: JavaScript
• Size: 259 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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




  

  

  

  

  


  

  



## Installation

*Installation*

```sh

npm i @vanillawc/wc-icon-rule

```

*Import from NPM*

```html

```

*Import from CDN*

```html

```

## Demo

Try it on [WebComponents.dev](https://webcomponents.dev/edit/QfTAXd2htTqIEJowWrK6?sv=1&pm=1)

## 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

```html

  

    

    

```

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

## Contributing

See [CONTRIBUTING.md](https://github.com/vanillawc/vanillawc/blob/main/CONTRIBUTING.md)