探索优雅设计：Eva Icons - 精致的开源图标库

Eva Icons 是一款精心打造的开源图标集合，包含超过480个常见的动作和物品图标。这个图标集不仅设计精美，还支持四种动画效果——zoom、pulse、shake 和 flip，使你的数字产品更具生命力。无论是Web应用、iOS还是Android平台，都可以轻松集成并使用这些图标。

下载与安装

你可以直接从Eva Icons 官方网站下载完整的图标包，或者通过NPM进行程序化引入。如果你只需要个别图标，也可以单独下载PNG或SVG格式。

CDN 引入

在项目中直接引用CDN：

<script src="https://unpkg.com/eva-icons"></script>

NPM 安装

npm i eva-icons

然后在HTML文件中引入库：

<script src="path/to/dist/eva-icons.js"></script>

或者在JavaScript代码中导入：

// CommonJS
const eva = require('eva-icons');

// ES6
import * as eva from 'eva-icons';

如何使用

JavaScript

添加data-eva属性到元素，然后调用eva.replace()方法替换为SVG元素：

<i data-eva="github"></i>

<script>
  eva.replace();
</script>

你可以使用额外的数据属性如data-eva-fill、data-eva-height和data-eva-width来调整颜色和尺寸，并且利用data-eva-animation添加动画效果。

字体图标

Eva Icons也提供为Web字体，只需引入CSS样式表即可：

<link href="path/to/style/eva-icons.css">

添加eva和eva-icon类到元素：

<i class="eva eva-github"></i>

虽然字体图标简单易用，但推荐使用SVG图标以获得更佳的渲染和性能。

动画与自定义选项

eva.replace() 方法可以接受一个可选对象参数来自定义图标行为，包括填充色