import React from 'react';
const svgIcons = {
apple: ( props ) => (
),
'arrow-right': ( props ) => (
),
check: ( props ) => (
),
compass: ( props ) => (
),
envelope: ( props ) => (
),
facebook: ( props ) => (
),
linkedin: ( props ) => (
),
search: ( props ) => (
),
twitter: ( props ) => (
),
youtube: ( props ) => (
),
} as const;
export default function Icon ( props: {
/**
* Fill color of the icon to be rendered. Can be any HTML-valid
* color string, e.g. hexadecimal, RGBA, CSS color names, etc.
* If supplied, this value takes precedence over `props.themeColor`.
*/
color?: string,
/**
* Name of the icon to be rendered.
*/
name: keyof typeof svgIcons,
/**
* Size of the icon to be rendered in pixels. Defaults to 20.
*/
size?: number,
/**
* Theme color of the icon to be rendered. This will be mapped to a
* CSS variable name declared by the ColorScheme component.
* Defaults to 'typography'.
*/
themeColor?: (
'accent' |
'typography' |
'typography-faint'
),
className?: React.HTMLAttributes['className'],
} ) {
const {
color,
size = 20,
themeColor = 'typography',
} = props;
const fill = color || `var(--color-${themeColor}, black)`;
const commonProps = {
'aria-hidden': true,
fill,
height: size,
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
};
const Icon = svgIcons[props.name];
return ;
}