HIsheR
31 lines
1.5 KiB
TypeScript
31 lines
1.5 KiB
TypeScript
/*** 内联图标工厂：组件内部用小图标一律走 SVG，不用 emoji —— emoji 在 Windows / macOS 会渲染成彩色位图，尺寸、颜色、基线都不可控 ***/
|
|
|
|
const NS = 'http://www.w3.org/2000/svg'; // SVG 命名空间常量，createElementNS 必填
|
|
|
|
/*** 放大镜图标：搜索框的默认前缀。外层 span 承载布局，返回 HTMLElement 以兼容 prefix 入参类型 ***/
|
|
export function iconSearch(): HTMLElement {
|
|
const holder = document.createElement('span');
|
|
holder.style.display = 'inline-flex'; // 让图标与输入文本在同一基线居中
|
|
holder.setAttribute('aria-hidden', 'true'); // 纯装饰：语义由输入框 placeholder / label 承担
|
|
const svg = document.createElementNS(NS, 'svg');
|
|
svg.setAttribute('viewBox', '0 0 16 16');
|
|
svg.setAttribute('width', '14');
|
|
svg.setAttribute('height', '14');
|
|
svg.setAttribute('fill', 'none');
|
|
svg.setAttribute('stroke', 'currentColor'); // 跟随主题文字色，暗色自动翻转
|
|
svg.setAttribute('stroke-width', '1.5');
|
|
svg.setAttribute('stroke-linecap', 'round');
|
|
const lens = document.createElementNS(NS, 'circle');
|
|
lens.setAttribute('cx', '7');
|
|
lens.setAttribute('cy', '7');
|
|
lens.setAttribute('r', '4.5');
|
|
const handle = document.createElementNS(NS, 'line');
|
|
handle.setAttribute('x1', '10.5');
|
|
handle.setAttribute('y1', '10.5');
|
|
handle.setAttribute('x2', '14');
|
|
handle.setAttribute('y2', '14');
|
|
svg.append(lens, handle);
|
|
holder.append(svg);
|
|
return holder;
|
|
}
|