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>
<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:
<x-icon>
The x-icon element displays an icon. The size is defined in the icon-set and by default 1em.
<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><x-iconset-svg>
The x-iconset-svg element allows users to define their own icon sets that contain svg icons.
<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><x-iconset-img>
The x-iconset-img element allows users to define their own icon sets that contain sprite-map like icons.
<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
git clone https://github.com/proddi/x-icons
cd x-icons
npm install
npm install -g polymer-cliRunning the demo locally
polymer serve --npm
open http://127.0.0.1:<port>/demo/Running the tests
polymer test --npm