Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@commercetools-uikit/icons
Advanced tools
All SVG icons are rendered as React components.
All SVG icons are rendered as React components.
import { ExportIcon } from '@commercetools-uikit/icons';
<ExportIcon />;
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
size | string | 'small', 'medium', 'big', 'scale' | 'big' | Specifies the icon size (if scale is selected, the dimensions will scale according with the parents) | |
color | string | 'solid', 'neutral60', 'info', 'primary', 'primary40', 'warning', 'error' | 'solid' | Specifies the icon color |
Main use cases are:
Buttons
<SecondaryButton
onClick={() => {}}
iconLeft={<ExportIcon />}
label={this.props.intl.formatMessage(messages.exportList)}
/>
Icon Buttons
<IconButton
onClick={() => {}}
icon={<ExportIcon />}
label={this.props.intl.formatMessage(messages.exportList)}
/>
If you need to render an SVG icon that is not part of the default set of icons, it's possible to render it using a special component <InlineSvg>
.
The component is exported as a separate entry point:
import InlineSvg from '@commercetools-uikit/icons/inline-svg';
import InlineSvg from '@commercetools-uikit/icons/inline-svg';
const svg = `<svg><path ... /></svg>`;
const App = () => <InlineSvg data={svg} color="primary" size="medium" />;
The component accepts the same props as the <*Icon>
components color
and size
. Additionally it requires the data
prop, which is the actual SVG content.
The data
passed to the component is run through a DOM sanitizer to prevent unwanted XSS injections.
This component can be used whenever the icon has to be rendered dynamically on runtime. For example in the Merchant Center this can be the case for the navigation menu icons, etc.
FAQs
All SVG icons are rendered as React components.
The npm package @commercetools-uikit/icons receives a total of 19,856 weekly downloads. As such, @commercetools-uikit/icons popularity was classified as popular.
We found that @commercetools-uikit/icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.