Backport the selected changes from PR #3928 and PR #3902 onto dsh-v0.1.5-rc.1, retaining baseline session recordings and excluding newer master commits. Refs #3927 Refs #3903 Co-authored-by: LegGasai <[email protected]>
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { useId } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
import type { IconProps } from './icons/props.ts'
|
|
import type { CodeFileType } from './code-file-types.ts'
|
|
import { CODE_FILE_ARTWORK, CODE_FILE_ICON_ID_TOKEN } from './code-file-icon-artwork.ts'
|
|
|
|
/**
|
|
* Render one full-color square code-file glyph from the embedded icon set.
|
|
* @param props - Detailed code type, optional size, and optional CSS class.
|
|
* @returns The selected decorative SVG with its identifying palette intact.
|
|
*/
|
|
export function CodeFileIcon({ type, size = 20, className }: IconProps & { readonly type: CodeFileType }): ReactNode {
|
|
const instanceId = `dsh-code-icon-${useId().replaceAll(':', '')}`
|
|
const artwork = CODE_FILE_ARTWORK[type].replaceAll(CODE_FILE_ICON_ID_TOKEN, instanceId)
|
|
// Package tests reject unsafe markup and invalid local references in this
|
|
// static table. Per-instance ids keep gradients and clip paths independent.
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
className={className}
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
dangerouslySetInnerHTML={{ __html: artwork }}
|
|
/>
|
|
)
|
|
}
|