97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
|
/**
|
|||
|
|
* SVG-спрайты: типы и React-компонент.
|
|||
|
|
* @generated — this file is auto-generated, do not edit manually.
|
|||
|
|
*/
|
|||
|
|
import type { SVGAttributes, HTMLAttributes } from 'react'
|
|||
|
|
import styles from './svg-sprite.module.css'
|
|||
|
|
|
|||
|
|
/** Имена иконок спрайта «icons». */
|
|||
|
|
export type IconsIconName =
|
|||
|
|
| 'arrow-left'
|
|||
|
|
| 'arrow-right'
|
|||
|
|
| 'check'
|
|||
|
|
| 'discount-shape'
|
|||
|
|
| 'flash'
|
|||
|
|
| 'heart-tick'
|
|||
|
|
| 'heart-tick (1-я копия)'
|
|||
|
|
|
|||
|
|
/** Имена иконок спрайта «logos». */
|
|||
|
|
export type LogosIconName =
|
|||
|
|
| 'github'
|
|||
|
|
| 'twitter'
|
|||
|
|
| 'youtube'
|
|||
|
|
|
|||
|
|
/** Маппинг имени спрайта на тип его иконок. */
|
|||
|
|
export type SpriteMap = {
|
|||
|
|
icons: IconsIconName
|
|||
|
|
logos: LogosIconName
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** Имя спрайта. */
|
|||
|
|
export type SpriteName = keyof SpriteMap
|
|||
|
|
|
|||
|
|
/** Спрайт по умолчанию. */
|
|||
|
|
export type DefaultSprite = 'icons'
|
|||
|
|
|
|||
|
|
/** Имя иконки для конкретного спрайта. */
|
|||
|
|
export type IconName<S extends SpriteName = SpriteName> = SpriteMap[S]
|
|||
|
|
|
|||
|
|
const PUBLIC_PATH = ''
|
|||
|
|
const DEFAULT_SPRITE: SpriteName = 'icons'
|
|||
|
|
|
|||
|
|
const SPRITE_FILES: Record<SpriteName, string> = {
|
|||
|
|
icons: 'icons.sprite.svg',
|
|||
|
|
logos: 'logos.sprite.svg',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type IconBaseProps<S extends SpriteName> = {
|
|||
|
|
/** Имя иконки. */
|
|||
|
|
icon: IconName<S>
|
|||
|
|
/** Имя спрайта. По умолчанию: первый из конфига. */
|
|||
|
|
sprite?: S
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type IconSvgProps<S extends SpriteName> = IconBaseProps<S> & {
|
|||
|
|
wrapped?: false
|
|||
|
|
} & SVGAttributes<SVGSVGElement>
|
|||
|
|
|
|||
|
|
type IconWrappedProps<S extends SpriteName> = IconBaseProps<S> & {
|
|||
|
|
wrapped: true
|
|||
|
|
} & HTMLAttributes<HTMLSpanElement>
|
|||
|
|
|
|||
|
|
export type SvgSpriteProps<S extends SpriteName = DefaultSprite> =
|
|||
|
|
| IconSvgProps<S>
|
|||
|
|
| IconWrappedProps<S>
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Иконка из SVG-спрайта.
|
|||
|
|
*
|
|||
|
|
* Используется для:
|
|||
|
|
* - отображения иконки через `<use href="...">`
|
|||
|
|
* - обёртки в `<span>` через проп `wrapped`
|
|||
|
|
*
|
|||
|
|
* Спрайт по умолчанию: «icons».
|
|||
|
|
*/
|
|||
|
|
export const SvgSprite = <S extends SpriteName = DefaultSprite>(props: SvgSpriteProps<S>) => {
|
|||
|
|
const { icon, sprite = DEFAULT_SPRITE as S, wrapped, className, ...rest } = props
|
|||
|
|
const href = `${PUBLIC_PATH}/${SPRITE_FILES[sprite]}#${icon}`
|
|||
|
|
|
|||
|
|
if (wrapped) {
|
|||
|
|
const { ...htmlAttr } = rest as HTMLAttributes<HTMLSpanElement>
|
|||
|
|
return (
|
|||
|
|
<span {...htmlAttr} className={[styles.wrap, className].filter(Boolean).join(' ')}>
|
|||
|
|
<svg>
|
|||
|
|
<use href={href} />
|
|||
|
|
</svg>
|
|||
|
|
</span>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { ...svgAttr } = rest as SVGAttributes<SVGSVGElement>
|
|||
|
|
return (
|
|||
|
|
<svg {...svgAttr} className={[styles.root, className].filter(Boolean).join(' ')}>
|
|||
|
|
<use href={href} />
|
|||
|
|
</svg>
|
|||
|
|
)
|
|||
|
|
}
|