open-index/open-npm huggingface dataset:
npm package: @quarkd/icons
Description: Quark icons for Mobile
Latest version: 1.0.4

# Quark icons（SVG）

icons 是从 Quark 组件库独立出来的独立 npm 包。

- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
- 在低端设备上 SVG 有更好的清晰度。
- 支持多色图标。
- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。

## 为什么不使用 icon-font

使用上存在不便。首先，加载一个包含数百图标的 `Icon Font`，却只使用其中几个图标，非常浪费加载时间。自己制作 `Icon Font` 以及把多个 `Icon Font` 中用到的图标整合成一个 Font 也非常不方便。

浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。尤其是在不同系统下对文字进行抗锯齿的算法不同，可能会导致显示效果不同。

Icon Font 作为一种字体，Icon 显示的大小和位置可能要受到 font-size、line-height、word-spacing 等等 CSS 属性的影响。Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响，调整起来很不方便。

为了实现最大程度的浏览器支持，可能要提供至少四种不同类型的字体文件。包括 TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。

网络延时会导致 Icon 会先加载出来一个 string。
npm package: @quarkd/quark-react
Description: Web components react reactify
Latest version: 2.0.7

# quark-react

The bottom layer relies on the `quarkd` component library, which solves the problem that web componnents events need to manually addEventListener in react.

底层依托 `Quark` 组件库，解决了 web componnents 事件在 react 中需要手动 addEventListener 的问题。

## Install

```bash
npm install @quarkd/quark-design
```

## Usage

```js
import { Search } from "@quarkd/quark-react";
<Search
  className="xxx"
  onChange={onChange}
  onFocus={onFocus}
  onBlur={onBlur}
  onSearch={onSearch}
  onCancel={onCancel}
  onBack={onBack}
/>;
```