@dile/icons - npm Package Compare versions

Comparing version 1.0.0 to 1.0.2

package.json

		{
		"name": "@dile/icons",
		"version": "1.0.0",
		"version": "1.0.2",
		"description": "Some SVG icons to use in web components.",
		@@ -32,3 +32,3 @@ "keywords": [
		},
		"gitHead": "d16d2269b51ad7eac884dad1ddb7806dac173da5"
		"gitHead": "b404cf91b5ed5788d9ec6c1560299569accb7cce"
		}

README.md

		@@ -5,46 +5,5 @@ # @dile/icons

		## Usage
		## Docs and demos

		Import the icon you need:

		```javascript
		import { infoIcon } from '@dile/icons';
		```

		Use the icon in a Lit template:

		```javascript
		render() {
		return html`
		// Your component template
		${ infoIcon }
		`;
		}
		```

		To create the icon styles easily you may use the CSS declaration provided in this package.

		```javascript
		import { iconStyles } from '@dile/icons';
		```

		Then, you can use the style declaration in your Lit component:

		```javascript
		static get styles() {
		return [iconStyles, css`
		:host {
		--dile-icon-color: #fce;
		}
		`];
		}
		```

		### CSS Custom Properties

		You can customize it using CSS Custom Properties.

		Custom property \| Description \| Default
		----------------\|-------------\|---------
		--dile-icon-size \| Icon size \| 24px
		--dile-icon-color \| Icon color \| #888
		- [GitHub readme docs](https://github.com/Polydile/dile-components/blob/master/site/pages/utils/icons.rocket.md)
		- [Docs and demos on the dile-components site](https://dile-components.polydile.com/utils/icons/)

New alerts