Install

npm install pixelfood --save

Node

const { manifest, all, path: iconPath } = require("pixelfood");

iconPath("tomato"); // → /…/node_modules/pixelfood/src/assets/icons/tomato.png
manifest.categories.fruits; // → ["apple", "pear", "orange", …]
all.length; // total number of icons

React

Single WebP sprite sheet, one HTTP request, crisp at any multiple of 32:

import { PixelfoodIcon } from "pixelfood/react";

<PixelfoodIcon name="tomato" size={64} />
<PixelfoodIcon name="salmon" size={48} />
<PixelfoodIcon name="olive_oil" />

Direct file access

require("pixelfood/icons/onion.png");
require("pixelfood/manifest");
require("pixelfood/sprite"); // ./src/assets/sprite.webp

Categories

| | | | | | ----------------- | ------------------- | --------------- | -------------- | | vegetables · 40 | fruits · 11 | beef · 6 | pork · 5 | | poultry · 5 | lamb · 2 | cured_meats · 4 | seafood · 7 | | cheese · 9 | dairy · 5 | legumes · 5 | nuts_seeds · 7 | | grains_bread · 8 | tomato_products · 3 | preserves · 4 | asian · 7 | | vinegars_oils · 6 | wines · 2 | spices · 13 | sweeteners · 6 | | sauces · 6 | drinks · 14 | | |

Full list in icons/icons.json.

Spec

| | | | ---------- | ------------------------------------------------- | | size | 32 × 32 | | format | PNG (per-icon) + WebP sprite sheet | | background | transparent | | view | low-top-down | | outline | selective | | shading | medium | | detail | high | | generator | PixelLab — create_object |

Build the sprite

npm run build   # writes src/assets/sprite.webp + src/assets/sprite.json

License

CC BY-NC-SA 4.0 — free for non-commercial use with attribution and share-alike. See LICENSE.