js实现icon

实现图标的方法

在JavaScript中实现图标有多种方式，可以根据项目需求和技术栈选择合适的方法。

使用Unicode字符 某些Unicode字符可以作为简单图标使用，例如：

document.getElementById('icon').innerHTML = '★'; // 五角星图标

使用CSS伪元素 通过JavaScript动态添加包含图标的CSS类：

const element = document.querySelector('.button');
element.classList.add('icon-star');

对应的CSS：

.icon-star::before {
  content: "\2605";
}

使用SVG图标 直接注入SVG代码：

document.getElementById('icon-container').innerHTML = `
  <svg viewBox="0 0 24 24" width="24" height="24">
    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
  </svg>
`;

使用图标字体库 引入第三方图标字体库如Font Awesome：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

JavaScript动态添加：

const icon = document.createElement('i');
icon.className = 'fas fa-star';
document.body.appendChild(icon);

使用Canvas绘制 通过Canvas API绘制自定义图标：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(12, 2);
ctx.lineTo(15.09, 8.26);
// 继续绘制星形路径...
ctx.fillStyle = 'gold';
ctx.fill();

选择建议

对于简单项目，Unicode或CSS伪元素是最轻量级的解决方案。需要丰富图标集时，推荐使用SVG或图标字体库。需要完全自定义和动态控制时，Canvas是不错的选择。