@talend/icons

Talend Icons

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

How to use

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" />;
}

How to contribute

Please be sure you have read our guidelines.

Create a Pull Request and be smart.

How to add an icon

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.

How svg code should look like

## 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>

All path are closed

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 class are user defined

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>

Use shape element whenever its possible

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

No display="none" elements

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

How to test in local

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

How to build in local

# 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

Interaction with backend product

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