mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
44 lines
1.4 KiB
React
44 lines
1.4 KiB
React
import React from 'react'
|
|
|
|
/** Lucide glyph renderer. Lux uses lucide-react 0.462.0 and no other icon set;
|
|
* in a plain browser page the same set arrives as the lucide UMD bundle, which
|
|
* this component reads. Load it once per page:
|
|
* <script src="https://unpkg.com/[email protected]/dist/umd/lucide.js"></script> */
|
|
const pascal = (n) => n.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase())
|
|
|
|
function lookup(name) {
|
|
const g = typeof window !== 'undefined' ? window.lucide : null
|
|
if (!g) return null
|
|
const set = g.icons || g
|
|
return set[name] || set[pascal(name)] || null
|
|
}
|
|
|
|
export function Icon({ name, size = 16, strokeWidth = 2, color = 'currentColor', style, ...rest }) {
|
|
const node = lookup(name)
|
|
const kids = []
|
|
if (Array.isArray(node)) {
|
|
node.forEach((child, i) => {
|
|
if (Array.isArray(child)) kids.push(React.createElement(child[0], { key: i, ...child[1] }))
|
|
else if (child && child.tag) kids.push(React.createElement(child.tag, { key: i, ...child.attrs }))
|
|
})
|
|
}
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={strokeWidth}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
style={{ flexShrink: 0, display: 'block', ...style }}
|
|
{...rest}
|
|
>
|
|
{kids}
|
|
</svg>
|
|
)
|
|
}
|