# @kano/icons-rendering

> A small set of functions to help organizing the rendering of SVG icons with HTML templates.

Latest version **3.3.14** (published 2020-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kano/icons-rendering
pnpm add @kano/icons-rendering
yarn add @kano/icons-rendering
bun add @kano/icons-rendering
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.14 |
| Published | 2020-06-19 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alexb-kano, alicemarshall, chaitz, charlie-kano, hicksatkano, holographicleah, joe-thom, kanocomputing, onishiweb, rpazdera, ting88003355, tomkano, wassupduck |

## Links

- npm: https://www.npmjs.com/package/@kano/icons-rendering
- npm.io page: https://npm.io/package/@kano/icons-rendering

## Recent versions

- 3.3.14 (latest) — 2020-06-19
- 3.0.16 — 2019-05-20
- 3.0.15 — 2019-05-03
- 3.0.6 — 2019-01-28
- 0.0.1-alpha.1 — 2019-01-17
- 0.0.1-alpha.0 — 2019-01-17
- 1.0.0 — 2018-10-24

## README

# Icons rendering

A small set of functions to help organizing the rendering of SVG icons with HTML templates.

## Create the template

Keeping your SVG icons in memory as HTML template is efficient as the browser can copy the DOM tree really fast.
You can create the template using the `svg` string litteral tag.
This can be used to create a SVG icon sheet with a whole set of icons.

```js
import { svg } from '@kano/icons-rendering/index.js';

const svgTemplate = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"></svg>`;

```

## Render the icon

Rendering an icon by embedding its svg is the most efficient way to do it, you can clone the template to append its contents for a quick icon injection:

```js

const { content } = svgTemplate.cloneNode(true);

el.appendChild(content);

```

If you do not control where the icon will be rendered and a src is required, you can use the `dataURI` method:

```js
import { svg, dataURI } from '@kano/icons-rendering/index.js';

const svgTemplate = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"></svg>`;

const imageSrc = dataURI(svgTemplate);

```

---
_Source: https://npm.io/package/@kano/icons-rendering · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._