js实现图标
使用 SVG 图标
SVG（可缩放矢量图形）是图标实现的常见选择，支持无损缩放和动态修改。通过 <svg> 标签直接嵌入 HTML，或通过 JavaScript 动态创建。
示例：动态创建 SVG 图标
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "24");
svg.setAttribute("height", "24");
svg.innerHTML = '<path d="M12 2L4 12l8 10 8-10z" fill="currentColor"/>';
document.body.appendChild(svg);使用 Icon Fonts
通过引入字体库（如 Font Awesome），用 CSS 类名快速渲染图标。需加载字体文件后，通过 <i> 标签或 JavaScript 动态添加类名。
示例：动态添加字体图标
const icon = document.createElement("i");
icon.className = "fa fa-heart"; // Font Awesome 类名
document.body.appendChild(icon);使用 Canvas 绘制
适合需要动态交互或复杂绘制的场景。通过 Canvas API 绘制矢量或位图图标。
示例：绘制简单图标
const canvas = document.createElement("canvas");
canvas.width = 24;
canvas.height = 24;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(12, 12, 10, 0, Math.PI * 2);
ctx.fill();
document.body.appendChild(canvas);使用第三方库
-
React 生态：
react-icons提供多套图标库的封装。import { FaReact } from "react-icons/fa"; // 直接作为组件使用 <FaReact /> -
通用库：
Iconify支持 100+ 图标集，可通过 CDN 或 npm 引入。
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script> <iconify-icon icon="mdi:heart"></iconify-icon>
注意事项
- 性能：SVG 和 Icon Fonts 适合静态图标，Canvas 适合动态效果。
- 可访问性：为图标添加
aria-label或隐藏文本（如span.sr-only）。 - 主题适配：使用
currentColor让 SVG 继承父元素颜色，便于暗色模式切换。
