This is the set of SVG icons used in our apps.

To use this icon set you just have to install it through NPM.

npm install @talend/icons

Next you can get the icon set object through a simple require:

const icons = require('@talend/icons').default;
const addIcon = icons.svgs['add'];

This icon set is registred within @talend/react-components Icon. So you can use it through this addon.

import React from 'react';
import { Icon } from '@talend/react-components';
function MyComponent() {
	return <Icon name="talend-add" />;
}

Please be sure you have read our guidelines.

Create a Pull Request and be smart.

Just add the icon svg file inside the src/svg folder.

On the name of the icon we are following same rule as fontawesome project.

## No style embed Styles are defined outside the svg via CSS

The following code snippet illustrate this error

<svg id="cluster" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<defs><style>.cls-1{fill:#231f20;}</style></defs><title>cluster</title><path class="cls-1" d="M650,85.5H150L0,435.5v250H800v-250Zm100,550H50v-150H750Z" transform="translate(0 -85.5)"/><rect class="cls-1" x="650" y="450" width="50" height="50"/><rect class="cls-1" x="100" y="450" width="50" height="50"/><rect class="cls-1" x="200" y="450" width="50" height="50"/><rect class="cls-1" x="300" y="450" width="50" height="50"/>
</svg>

Complete icon or parts of icon background color should be defined solely by "fill" css attribute. To check if a path is closed the "d" attribute of "path" element end with a z

<path class="cls-1" d="M650,85.5H150L0,435.5v250H800v-250Zm100,550H50v-150H750Z" transform="translate(0 -85.5)"/>

All classes set on complete icon or part of icon should be defined by hand and should be meaningfull

<g class="screwdriver">
<path class="screwdriver-handle" d="M650,85.5H150L0,435.5v250H800v-250Zm100,550H50v-150H750Z" transform="translate(0 -85.5)"/>
<path class="screwdriver-tip" d="M650,85.5H150L0,435.5v250H800v-250Zm100,550H50v-150H750Z" transform="translate(0 -85.5)"/>
</g>

polygon, circles, ellipse should be used instead of path.

those are useless as they can't be styled and only add size to icons

yarn docs
cd docs
# use your command-line http server to provide the content
http-server

# go the UI root
cd ../..
yarn build-icons
# this builds the new icons and build components with this new icons and launch the unit test

The icons module produces the icons as jars:

• org.talend.ui:talend-icon:${talend-ui.version}:jar:api: Talend Component Kit API extension for internal icons.
• org.talend.ui:talend-icon:${talend-ui.version}:jar:svg: the SVG icons.
• org.talend.ui:talend-icon:${talend-ui.version}:jar:png: the icons as PNG (for the Studio).

You can ensure the jar is ready to be released using the following command - you must have maven installed:

npm run prepare-jar