Icons
Overview
Icons are small SVG shapes, ranging from basic UI shapes to brand logos. NewsKit contains a default set but any of these can be overriden by providing a React component in the icons section of your theme.
Usage
Icons can be used to enhance other elements and content, as well as used inside links or buttons when space is limited.
Available Icons
Name | Preview |
---|---|
IconFilledCircle | |
IconFilledGitHub | |
IconFilledFacebook | |
IconFilledTwitter | |
IconFilledWhatsApp | |
IconFilledPlaceholder |
Props
Icons must have a size specified, and some also support an optional colour override.
Playground
Create NewsKit icons
With the help of the customToNewsKitIcon
util function, each SVG icon can be easily turned into a Newskit icon that works well
with theme tokens and getFromTheme
util functions. The only requirement is to wrap the SVG markup within an Svg
component and pass props to it.
The following example shows how the SVG component should be used:
<Svg {...props} viewBox="0 0 429 422">
<g fill="none" fill-rule="evenodd" transform="translate(-77.000000, -1738.000000) translate(77.000000, 1738.500000)">
<circle cx="250.5" cy="242.5" r="178" style="mix-blend-mode:multiply"/>
<circle cx="195" cy="195" r="195" style="mix-blend-mode:multiply"/>
</g>
</Svg>
Use customToNewsKitIcon
utility function to make the svg icon compatible with NewsKit:
export const IconFilledCircles = customToNewsKitIcon(
'IconFilledCircles',
props => (
<Svg {...props} viewBox="0 0 429 422">
<g fill="none" fill-rule="evenodd" transform="translate(-77.000000, -1738.000000) translate(77.000000, 1738.500000)">
<circle cx="250.5" cy="242.5" r="178" style="mix-blend-mode:multiply"/>
<circle cx="195" cy="195" r="195" style="mix-blend-mode:multiply"/>
</g>
</Svg>
),
);
Rationale
Accessibility
Where icon colour can be overidden, the icon must have a 3:1 minimum contrast ratio with its background.