|
| 1 | +import React from 'react'; |
| 2 | +import PropTypes from 'prop-types'; |
| 3 | +import { Icon as HslFiIconWrapper, Question } from '@hsl-fi/icons'; |
| 4 | +import { useConfigContext } from '../configurations/ConfigContext'; |
| 5 | +import SvgIcon from './Icon'; |
| 6 | + |
| 7 | +/** |
| 8 | + * ICON_MAP maps a logical icon name to: |
| 9 | + * - hslFiIcon: the @hsl-fi/icons component (used when iconModeSet === 'hsl') |
| 10 | + * - fallbackImg: the SVG sprite id (used for all other themes) |
| 11 | + */ |
| 12 | +const ICON_MAP = { |
| 13 | + Question: { hslFiIcon: Question, fallbackImg: 'icon_info' }, |
| 14 | +}; |
| 15 | + |
| 16 | +const ICON_NAMES = Object.keys(ICON_MAP); |
| 17 | + |
| 18 | +/** |
| 19 | + * ThemedIcon renders the correct icon depending on the active theme: |
| 20 | + * - HSL theme (iconModeSet === 'hsl'): uses @hsl-fi/icons |
| 21 | + * - All other themes: falls back to the SVG sprite via Icon.js |
| 22 | + * |
| 23 | + * This component is the single place responsible for @hsl-fi/icons imports. |
| 24 | + * Usage sites should never import from @hsl-fi/icons directly. |
| 25 | + */ |
| 26 | +function ThemedIcon({ name, ...rest }) { |
| 27 | + const config = useConfigContext(); |
| 28 | + const { hslFiIcon, fallbackImg } = ICON_MAP[name]; |
| 29 | + |
| 30 | + if (config.iconModeSet === 'hsl') { |
| 31 | + return <HslFiIconWrapper icon={hslFiIcon} {...rest} />; |
| 32 | + } |
| 33 | + |
| 34 | + return <SvgIcon img={fallbackImg} {...rest} />; |
| 35 | +} |
| 36 | + |
| 37 | +ThemedIcon.propTypes = { |
| 38 | + /** Logical icon name — must exist in ICON_MAP */ |
| 39 | + name: PropTypes.oneOf(ICON_NAMES).isRequired, |
| 40 | +}; |
| 41 | + |
| 42 | +export default ThemedIcon; |
0 commit comments