import React from 'react';
import styled from 'styled-components';
const IconWrapper = styled.Text`
font-family: MyFont;
`;
const glyphs = {
'logo': '\ue94e',
'minus': '\ue900',
'plus': '\ue901',
...
};
interface IconProps {
glyph: string;
}
const Icon: React.FC<IconProps> = ({ glyph }) => {
return (
<IconWrapper>{glyphs[glyph]}</IconWrapper>
);
};
export default Icon;
I need instead of glyph: string
pass explicit type enum
(or keyof glyphs).
That could be probably enum but I don't want to duplicate the whole structure once again.
Thanks for your ideas
You can use keyof
keyword combined with typeof
to narrow down the type
const Icon = ({ glyph: keyof typeof glyphs }) => {
For readability, you can define another type like below :
type GlyphIcon = keyof typeof glyphs;
const Icon = ({ glyph: GlyphIcon }) => {