npm package: @proddi/x-icons
Description: icons the easy way
Author: proddi
Latest version: 0.0.10

[![Published on NPM](https://img.shields.io/npm/v/@proddi/x-icons.svg)](https://www.npmjs.com/package/@proddi/x-icons)
[![Build status](https://travis-ci.org/proddi/x-icons.svg?branch=master)](https://travis-ci.org/proddi/x-icons)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@proddi/x-icons)

# x-icons - easy svg and png icons

The `x-icons` package allows you easily to embed icons to your page.

And the best it doesn't come with any depndency. This means it's super fast.

See: Documentation, Demo.

## Usage

### Installation

```
npm install --save @proddi/x-icons
```

### Full example

```html
<html>
  <head>
    <script type="module">
      import '@proddi/x-icons/x-iconset-svg.js';
      import '@proddi/x-icons/x-icon.js';
    </script>
  </head>
  <body>
     <!-- Load icons defined in the svg (id-attribute). -->
    <x-iconset-svg name="transit" href="icons/transit-icons.svg"></x-iconset-svg>

    <p>Normal sized icon: <x-icon icon="transit:bus"></x-icon></p<
    <p>Double sized icon: <x-icon size="2em" icon="transit:bus"></x-icon></p<

     <!-- Load icons from a sprite-map (id-attribute). -->
    <x-iconset-img name="pixel" width="256" icon-size="64" src="icons/demo-icons.png"
        icons="favorite play valid map-marker place profile star home invalid star2 route preferences layers date my-profile"></x-iconset-img>

    <p>Normal sized icon: <x-icon icon="pixel:play"></x-icon></p<
    <p>Double sized icon: <x-icon size="2em" icon="pixel:star"></x-icon></p<
  </body>
</html>
```




## Components:


### &lt;x-icon&gt;

The `x-icon` element displays an icon. The size is defined in the icon-set and by default 1em.

```html
<html>
  <head>
    <script type="module" src="@proddi/x-icons/x-iconset-svg.js"></script>
    <script type="module" src="@proddi/x-icons/x-icon.js"></script>
    <x-iconset-svg href="icons/transit-icons.svg"></x-iconset-svg>
  </head>
  <body>
     <!-- Use an icon from the imported iconset. -->
     <x-icon icon="search"></x-icon>

     <!-- In rare cases you need to load the icon from a source. -->
     <x-icon src="demo/location.png"></x-icon>
  </body>
</html>
```


### &lt;x-iconset-svg&gt;

The `x-iconset-svg` element allows users to define their own icon sets that contain svg icons.

```html
<html>
  <head>
    <script type="module" src="@proddi/x-icons/x-iconset-svg.js"></script>
    <x-iconset-svg name="transit" href="icons/transit-icons.svg"></x-iconset-svg>
  </head>
  <body>
     ...
  </body>
</html>
```


### &lt;x-iconset-img&gt;

The `x-iconset-img` element allows users to define their own icon sets that contain sprite-map like icons.

```html
<html>
  <head>
    <script type="module" src="@proddi/x-icons/x-iconset-img.js"></script>
    <x-iconset-img name="demo" width="256" icon-size="64" src="icons/demo-icons.png"
        icons="favorite play valid map-marker place profile star home invalid star2 route preferences layers date my-profile">
    </x-iconset-img>
  </head>
  <body>
     ...
  </body>
</html>
```


## Contributing

If you want to send a PR to this element, here are the instructions for running
the tests and demo locally:

### Installation

```sh
git clone https://github.com/proddi/x-icons
cd x-icons
npm install
npm install -g polymer-cli
```

### Running the demo locally

```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests

```sh
polymer test --npm
```