tools - GitLite

KO | EN

gitlite — search

#python #react #typescript #llm #android #rust #deep-learning #docker #awesome #cli #vue #pytorch #ios #openai

tools

(★ 99)

Library for working with SVG: importing, validating, parsing, exporting.

File Explorer

Download Latest Version (.zip)

- - ci.yml
- - .eslintignore
  - .gitignore
  - .npmignore
  - eslint.config.js
  - license.txt
  - package.json
  - README.md
  - tsconfig.json
  - tsconfig.src.json
  - tsconfig.tests.json
  - tsdown.config.js
  - vitest.config.js
- - .gitignore
  - package.json
  - tsconfig.json
- - .gitignore
  - package.json
  - tsconfig.json
- - .gitignore
  - index.html
  - package.json
  - tsconfig.json
  - tsconfig.node.json
  - unocss.config.ts
  - vite.config.ts
- - index.html
  - package.json
  - vite.config.ts
.editorconfig
.gitattributes
.gitignore
.prettierrc
CONTRIBUTING.md
license.txt
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
renovate.json

# Installation Guide

1. Get the code

git clone https://github.com/iconify/tools

Downloads the entire project code from GitHub to your computer.

cd tools

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install @iconify/tools --save

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Iconify Tools

This library is a collection of tools for importing, exporting and processing SVG images.

Its main purpose is to convert icon sets and fonts to Iconify JSON collections, but it can be used for other purposes.

## Installation

First install it by running this command:

```
npm install @iconify/tools --save
```

### CommonJS support

As of version 5, support for CommonJS has been dropped.

If you need to use CommonJS, install version 4: `npm install @iconify/tools@cjs`.

## Functions

Functions incuded in Iconify Tools:

- Download packages from git repository, GitHub API, GitLab API, NPM repository.
- Import SVGs from directory (and downloaded package), Figma API.
- Clean up, optimise, validate icons.
- Parse or change icon palette.
- Export icon sets in various formats.

See [Iconify Tools documentation](https://iconify.design/docs/libraries/tools/).

### Limitations

This library is opinionated.

It does not allow the following content in icons:

- Scripts and event listeners.
- Any remote resources: images, fonts, links, etc...
- Raster images. They do not belong in scalable icons.
- Text. Text is rendered differently in various operating systems, so it should not be used in SVG. Convert text to shapes.
- All tags and attributes that are not approved are removed, including all XML namespaces.

All limitations listed above are by design.

Iconify Tools library is designed to export icons that are safe to use in any environment and render identically for all users.

## Example

The following code example does the following:

- Imports set of SVG from directory.
- Cleans up all icons.
- Changes colors in all icons to `currentColor`.
- Optimises icons.
- Exports icons as `IconifyJSON` icon set.

```js
import { promises as fs } from 'fs';
import { importDirectory } from '@iconify/tools/lib/import/directory';
import { cleanupSVG } from '@iconify/tools/lib/svg/cleanup';
import { runSVGO } from '@iconify/tools/lib/optimise/svgo';
import { parseColors, isEmptyColor } from '@iconify/tools/lib/colors/parse';

(async () => {
	// Import icons
	const iconSet = await importDirectory('svg/test', {
		prefix: 'test',
	});

// Validate, clean up, fix palette and optimise
	iconSet.forEachSync((name, type) => {
		if (type !== 'icon') {
			return;
		}

const svg = iconSet.toSVG(name);
		if (!svg) {
			// Invalid icon
			iconSet.remove(name);
			return;
		}

// Clean up and optimise icons
		try {
			cleanupSVG(svg);
			parseColors(svg, {
				defaultColor: 'currentColor',
				callback: (attr, colorStr, color) => {
					return !color || isEmptyColor(color)
						? colorStr
						: 'currentColor';
				},
			});
			runSVGO(svg);
		} catch (err) {
			// Invalid icon
			console.error(`Error parsing ${name}:`, err);
			iconSet.remove(name);
			return;
		}

// Update icon
		iconSet.fromSVG(name, svg);
	});

// Export as IconifyJSON
	const exported = JSON.stringify(iconSet.export(), null, '\t') + '\n';

// Save to file
	await fs.writeFile(`output/${iconSet.prefix}.json`, exported, 'utf8');
})();
```

## Documentation

Full documentation is too big for simple README file. See [Iconify Tools documentation](https://iconify.design/docs/libraries/tools/) for detailed documentation with code samples.

## Sponsors

<p align="center">
  <a href="https://github.com/sponsors/cyberalien">
    <img src='https://cyberalien.github.io/static/sponsors.svg'/>
  </a>
</p>

## License

Library is released with MIT license.

© 2021-PRESENT Vjacheslav Trushkin