68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
/**
|
|
* 通用图标组件。
|
|
*
|
|
* 全部使用 Alright 主题的 iconfont 线性图标（见 src/iconfont.css），
|
|
* 尺寸与颜色由使用处的 CSS 控制（font-size / color），
|
|
* 因此同一套图标可以复用在按钮、统计条、导航等不同位置。
|
|
*/
|
|
|
|
type IconProps = {
|
|
/** 附加类名，便于局部覆盖字号或颜色 */
|
|
className?: string
|
|
}
|
|
|
|
const base = (name: string, className?: string) =>
|
|
`iconfont icon-${name}${className !== undefined ? ` ${className}` : ''}`
|
|
|
|
export function SearchIcon({ className }: IconProps) {
|
|
return <i className={base('search', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function UserIcon({ className }: IconProps) {
|
|
return <i className={base('user', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function RefreshIcon({ className }: IconProps) {
|
|
return <i className={base('refresh', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function LinkIcon({ className }: IconProps) {
|
|
return <i className={base('link', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ExternalIcon({ className }: IconProps) {
|
|
return <i className={base('external', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function EyeIcon({ className }: IconProps) {
|
|
return <i className={base('eye', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ThumbUpIcon({ className }: IconProps) {
|
|
return <i className={base('thumb-up', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ShareIcon({ className }: IconProps) {
|
|
return <i className={base('share', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function CloseIcon({ className }: IconProps) {
|
|
return <i className={base('close', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function MoreIcon({ className }: IconProps) {
|
|
return <i className={base('more', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ArrowUpIcon({ className }: IconProps) {
|
|
return <i className={base('arrow-up', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ArrowLeftIcon({ className }: IconProps) {
|
|
return <i className={base('arrow-left', className)} aria-hidden="true" />
|
|
}
|
|
|
|
export function ArrowDownIcon({ className }: IconProps) {
|
|
return <i className={base('arrow-down', className)} aria-hidden="true" />
|
|
}
|