GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - iconify/tools: Library for working with SVG: importing, validating, parsing, exporting.

BranchesTags
Open more actions menu

Latest commit

 

History

345 Commits
345 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
@iconify-demo
@iconify-demo
 
 
@iconify/tools
@iconify/tools
 
 
.editorconfig
.editorconfig
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
.prettierrc
.prettierrc
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
README.md
README.md
 
 
license.txt
license.txt
 
 
package.json
package.json
 
 
pnpm-lock.yaml
pnpm-lock.yaml
 
 
pnpm-workspace.yaml
pnpm-workspace.yaml
 
 
renovate.json
renovate.json
 
 

Repository files navigation

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.

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.
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 for detailed documentation with code samples.

Sponsors

License

Library is released with MIT license.

© 2021-PRESENT Vjacheslav Trushkin

About

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

iconify.design/docs/libraries/tools/

Topics

nodejsoptimizationsvgsvgo

Resources

Readme
MIT license

Contributing

Contributing
Activity
Custom properties

Stars

99 stars

Watchers

2 watching

Forks

25 forks
Report repository

Sponsor this project

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.