Notwithstanding Previous Misdemeanors

    @proddi/x-icons

    0.0.10 • Public • Published

    Published on NPM Build status Published on webcomponents.org

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

    Running the demo locally

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

    Running the tests

    polymer test --npm

    Install

    npm i @proddi/x-icons

    DownloadsWeekly Downloads

    12

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    196 kB

    Total Files

    21

    Last publish

    Collaborators

    • proddi