Spectre Forms 表单图标

Spectre Forms 表单图标是一个轻量级的 CSS 库，为表单元素提供了一套美观简洁的图标。它使用了纯 CSS 技术，不需要引入任何 JavaScript，非常适合不想增加额外 JavaScript 开销的前端项目。

安装

你可以通过 npm 安装 Spectre Forms 表单图标：

npm install spectre-forms-icons

或者你也可以直接下载 spectre-forms-icons.css 文件，并在 HTML 中引入：

<link rel="stylesheet" href="spectre-forms-icons.css">

使用

Spectre Forms 表单图标包含了丰富的表单元素图标，你只需要在表单元素上添加相应的类名即可实现。下面是一个基本的例子：

<form>
  <div class="form-group">
    <label class="form-label" for="name">Name</label>
    <input class="form-input" type="text" name="name" id="name">
    <i class="form-icon icon icon-edit"></i>
  </div>
</form>

在上面的例子中，我们添加了一个 <i> 元素并给它添加了一些类名，这样就可以展示一个编辑图标在输入框的右侧了。你可以根据你需要的图标，参考 Spectre 文档 中的 API 部分。

总结

Spectre Forms 表单图标是一个非常棒的 CSS 库，它提供了一个简单又美观的方式来为表单元素添加图标。使用它可以使你的表单看起来更加专业、美观，同时也不会增加额外的 JavaScript 开销。