@talend/icons
v7.10.2
Published
A scalable set of icons handcrafted with <3 by Talend.
Downloads
6,629
Readme
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