SvgIcon built-in icon

Effect demonstration

1. All icons

<SvgIcon name="arrowdown" />
<SvgIcon name="bells" />
<SvgIcon name="clockcircleo" />
<SvgIcon name="close" />
<SvgIcon name="closecircleo" />
<SvgIcon name="date" />
<SvgIcon name="down" />
<SvgIcon name="ellipsis" />
<SvgIcon name="eyeclose" />
<SvgIcon name="eyeopen" />
<SvgIcon name="left" />
<SvgIcon name="minus" />
<SvgIcon name="plus" />
<SvgIcon name="radio-checked" />
<SvgIcon name="radio-unchecked" />
<SvgIcon name="reload" />
<SvgIcon name="right" />
<SvgIcon name="search" />
<SvgIcon name="up" />
<SvgIcon name="checkboxChecked" />
<SvgIcon name="checkboxHalfchecked" />
<SvgIcon name="checkboxUnchecked" />

2. Modify size

<SvgIcon name="arrowdown" size={28} />
<SvgIcon name="bells" size={28} />
<SvgIcon name="clockcircleo" size={28} />
<SvgIcon name="close" size={28} />
<SvgIcon name="closecircleo" size={28} />
<SvgIcon name="date" size={28} />
<SvgIcon name="down" size={28} />
<SvgIcon name="ellipsis" size={28} />
<SvgIcon name="eyeclose" size={28} />
<SvgIcon name="eyeopen" size={28} />
<SvgIcon name="left" size={28} />
<SvgIcon name="minus" size={28} />
<SvgIcon name="plus" size={28} />
<SvgIcon name="radio-checked" size={28} />
<SvgIcon name="radio-unchecked" size={28} />
<SvgIcon name="reload" size={28} />
<SvgIcon name="right" size={28} />
<SvgIcon name="search" size={28} />
<SvgIcon name="up" size={28} />
<SvgIcon name="checkboxChecked" size={28} />
<SvgIcon name="checkboxHalfchecked" size={28} />
<SvgIcon name="checkboxUnchecked" size={28} />

3. Modify color

<SvgIcon name="arrowdown" color="#ff0000" />
<SvgIcon name="bells" color="#ff0000" />
<SvgIcon name="clockcircleo" color="#ff0000" />
<SvgIcon name="close" color="#ff0000" />
<SvgIcon name="closecircleo" color="#ff0000" />
<SvgIcon name="date" color="#ff0000" />
<SvgIcon name="down" color="#ff0000" />
<SvgIcon name="ellipsis" color="#ff0000" />
<SvgIcon name="eyeclose" color="#ff0000" />
<SvgIcon name="eyeopen" color="#ff0000" />
<SvgIcon name="left" color="#ff0000" />
<SvgIcon name="minus" color="#ff0000" />
<SvgIcon name="plus" color="#ff0000" />
<SvgIcon name="radio-checked" color="#ff0000" />
<SvgIcon name="radio-unchecked" color="#ff0000" />
<SvgIcon name="reload" color="#ff0000" />
<SvgIcon name="right" color="#ff0000" />
<SvgIcon name="search" color="#ff0000" />
<SvgIcon name="up" color="#ff0000" />
<SvgIcon name="checkboxChecked" color="#ff0000" />
<SvgIcon name="checkboxHalfchecked" color="#ff0000" />
<SvgIcon name="checkboxUnchecked" color="#ff0000" />

Example create an icon

IconArrowdown (create IconArrowdown.tsx packages/svg-icon)

import React, { FC, memo } from 'react';
import { ViewProps } from 'react-native';
import { GProps, SvgXml } from 'react-native-svg';

import { px } from '../helpers/normalize';
import { getIconColor } from './helper';

export interface SvgIconProps extends GProps, ViewProps {
  size?: number;
  color?: string | string[];
}

let IconArrowdown: FC<SvgIconProps> = ({ size, color, ...rest }) => {
  const xml = `
<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2743 4C12.6885 4 13.0243 4.33579 13.0243 4.75V19.75C13.0243 20.1642 12.6885 20.5 12.2743 20.5C11.8601 20.5 11.5243 20.1642 11.5243 19.75V4.75C11.5243 4.33579 11.8601 4 12.2743 4Z" fill="${getIconColor(
    color,
    0,
    '#999999'
  )}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.72046 13.1688C6.01396 12.8765 6.48884 12.8775 6.78112 13.171L12.2747 18.6873L17.7672 13.171C18.0595 12.8775 18.5344 12.8765 18.8279 13.1687C19.1214 13.461 19.1224 13.9359 18.8302 14.2294L12.8062 20.2794C12.6654 20.4207 12.4742 20.5002 12.2747 20.5002C12.0753 20.5002 11.884 20.4208 11.7433 20.2794L5.71827 14.2294C5.42598 13.9359 5.42696 13.4611 5.72046 13.1688Z" fill="${getIconColor(
    color,
    1,
    '#999999'
  )}"/>
</svg>
`;

  return <SvgXml xml={xml} width={size} height={size} {...rest} />;
};

IconArrowdown.defaultProps = {
  size: px(16),
};

export default memo(IconArrowdown);

API

Properties	Required	Description	Type	Default Value
name	true	Icon name	'arrowdown' | 'bells' | 'check' | 'checkcircle' | 'checkcircleo' | 'checkboxChecked' | 'checkboxHalfchecked' | 'checkboxUnchecked' | 'clockcircleo' | 'close' | 'closecircleo' | 'date' | 'down' | 'ellipsis' | 'eyeclose' | 'eyeopen' | 'left' | 'minus' | 'plus' | 'radio-checked' | 'radio-unchecked' | 'reload' | 'right' | 'search' | 'up'
size	false	icon size	number	16
color	false	icon color	string | string[]