purewhiter--mobilegym
wehub-resource-sync
41 行
1.2 KiB
TypeScript
41 行
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
export const MaskIcon: React.FC<{
|
|
src: string;
|
|
size?: number;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
/**
|
|
* Some glyph-based SVGs have very tight viewBox bounds. When used as a CSS mask
|
|
* at small sizes, edge pixels can get clipped by rasterization/rounding.
|
|
* Shrinking the mask slightly avoids the "bottom edge missing" artifact.
|
|
*/
|
|
maskScale?: number; // 0~1, default 0.96
|
|
}> = ({ src, size = 24, className = '', style, maskScale = 0.96 }) => {
|
|
const px = typeof size === 'number' ? `${size}px` : String(size);
|
|
const scale = Number.isFinite(maskScale) ? Math.min(1, Math.max(0, maskScale)) : 1;
|
|
const scalePct = `${(scale * 100).toFixed(2)}% ${(scale * 100).toFixed(2)}%`;
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className={className}
|
|
style={{
|
|
width: px,
|
|
height: px,
|
|
display: 'inline-block',
|
|
backgroundColor: 'currentColor',
|
|
WebkitMaskImage: `url(${src})`,
|
|
WebkitMaskRepeat: 'no-repeat',
|
|
WebkitMaskPosition: 'center',
|
|
WebkitMaskSize: scalePct,
|
|
maskImage: `url(${src})`,
|
|
maskRepeat: 'no-repeat',
|
|
maskPosition: 'center',
|
|
maskSize: scalePct,
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|