iconlist

Create optimized spritesheets and viewBox map json from a list of svg icons

Usage no npm install needed!

<script type="module">
  import iconlist from 'https://cdn.skypack.dev/iconlist';
</script>

README

iconlist

npm version changelog ci status license

Create optimized spritesheets and viewBox map json from a list of svg icons.


Install

npm i iconlist

Usage

Check out more usage examples and demos here.

Basic usage:

├── make-spritesheets.js
└── icons/
  ├── iconlist.json
  ├── icon-a.svg
  └── icon-b.svg

icons/iconlist.json

{
  "groups": [
    {
      "name": "my-icons",
      "sprites": [
        {
          "id": "icon1",
          "path": "./icon-a.svg"
        },
        {
          "id": "icon2",
          "path": "./icon-b.svg"
        }
      ]
    }
  ]
}

make-spritesheets.js

const {makeSpritesheetsAsync} = require('iconlist');

const main = async () => {
  const spritesheets = await makeSpritesheetsAsync('./icons/iconlist.json');
  const promises = [];
  spritesheets.forEach(
    sheet => promises.push(
      sheet.writeSpritesheetOptimized(`./out/${ sheet.name }.svg`),
      sheet.writeViewBoxMapAsync(`./out/${ sheet.name }.viewboxmap.json`),
    )
  );
  await Promise.all(promises);
};

// call or export main

Issues

issues pull requests

Please report any issues and suggestions here.