npm package: @magicx/assets
Description: Logo assets, favicons, webfonts for LobeHub
Author: magicx
Latest version: 1.2.4

<p align="center">
  <img width="160" src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp">
</p>
<h1 align="center">Lobe Assets</h1>

<div align="center">

Logo assets, favicons, webfonts for LobeHub

[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]

<!-- SHIELD GROUP -->

[![release][release-shield]][release-url]
[![releaseDate][release-date-shield]][release-date-url]
[![ciRelease][ci-release-shield]][ci-release-url] <br/>
[![contributors][contributors-shield]][contributors-url]
[![forks][forks-shield]][forks-url]
[![stargazers][stargazers-shield]][stargazers-url]
[![issues][issues-shield]][issues-url]

![](https://github.com/lobehub/favicon/blob/main/preview.png?raw=true)

</div>

<details>
<summary><kbd>Table of contents</kbd></summary>

#### TOC

- [📦 Installation](#-installation)
- [⌨️ Local Development](#️-local-development)
- [🤝 Contributing](#-contributing)

####

</details>

## 🤯 Logos

| <img src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp" width="64" > | <img src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-flat.svg" width="64" > | <img src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-high-contrast.svg" width="64" > | <img src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-text.svg" width="64" > |
| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [Logo 3D][logo-3d]                                                                 | [Logo Flat][logo-flat]                                                              | [Logo High Contrast][logo-high-contrast]                                                     | [Logo Text][logo-text]                                                              |
| webp                                                                               | svg                                                                                 | svg                                                                                          | svg                                                                                 |

[logo-3d]: https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp
[logo-flat]: https://npm.elemecdn.com/@lobehub/assets/logo/logo-flat.svg
[logo-high-contrast]: https://npm.elemecdn.com/@lobehub/assets/logo/logo-high-contrast.svg
[logo-text]: https://npm.elemecdn.com/@lobehub/assets/logo/logo-text.svg

<div align="right">

[![][back-to-top]](#readme-top)

</div>

## 💞 Favicons

![](https://github.com/lobehub/favicon/blob/main/docs/preview.png?raw=true)

This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)

Insert the following code in the `head` section of your pages:

```
<link rel="apple-touch-icon" sizes="180x180" href="https://npm.elemecdn.com/@lobehub/assets/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://npm.elemecdn.com/@lobehub/assets/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://npm.elemecdn.com/@lobehub/assets/favicons/favicon-16x16.png" />
<link rel="manifest" href="https://npm.elemecdn.com/@lobehub/assets/favicons/site.webmanifest" />
<link rel="mask-icon" href="https://npm.elemecdn.com/@lobehub/assets/favicons/safari-pinned-tab.svg" color="#000000" />
<meta name="apple-mobile-web-app-title" content="LobeHub" />
<meta name="application-name" content="LobeHub" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
```

_Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

<div align="right">

[![][back-to-top]](#readme-top)

</div>

## 🔤 Webfonts

[`Hack Nerd Font Mono`](https://npm.elemecdn.com/@lobehub/assets/webfonts/css/hack-nerd-font-mono.css)

```text
https://npm.elemecdn.com/@lobehub/assets/webfonts/css/hack-nerd-font-mono.css
```

[`HarmonyOS Sans`](https://npm.elemecdn.com/@lobehub/assets/webfonts/css/harmonyos-sans.css)

```text
https://npm.elemecdn.com/@lobehub/assets/webfonts/css/harmonyos_sans.css
```

[`HarmonyOS Sans SC`](https://npm.elemecdn.com/@lobehub/assets/webfonts/css/harmonyos-sans-sc.css)

```text
https://npm.elemecdn.com/@lobehub/assets/webfonts/css/harmonyos_sans_sc.css
```

<details>
<summary><kbd>File tree</kbd></summary>

```text
css/···································（样式表目录）
├── hack-nerd-font-mono.css············（Hack Nerd Font Mono 字体样式表）
├── harmonyos-sans.css·················（HarmonyOS Sans 字体样式表）
├── harmonyos-sans-sc.css··············（HarmonyOS Sans SC 字体样式表）
fonts/·································（字体目录）
├── Nerdfont···························（Nerd Font 字体目录）
├── HarmonyOS_Sans·····················（HarmonyOS Sans 字体目录）
├── HarmonyOS_Sans_Italic··············（HarmonyOS Sans 字体目录）
└── HarmonyOS_Sans_SC··················（HarmonyOS Sans SC 字体目录）
```

</details>

<details>
<summary><kbd>Font style:</kbd></summary>

```text
HarmonyOS_Sans_*/······················（字体目录）
├── *_Black.*··························（字重 900 的粗体）
├── *_Bold.*···························（字重 700 的粗体）
├── *_Light.*··························（字重 300 的细体）
├── *_Medium.*·························（字重 500 的标准体）
├── *_Regular.*························（字重 400 的标准体）
├── *_Thin.*···························（字重 100 的细体）
├── *.eot······························（支持 IE6-IE8、IE9+ 兼容模式的字体格式）
├── *.svg······························（支持旧版 iOS 的字体格式）
├── *.ttf······························（支持 Safari、Android、iOS 的字体格式）
├── *.woff·····························（支持现代浏览器的字体格式）
└── *.woff2····························（支持高版本现代浏览器的字体格式）
```

</details>

<div align="right">

[![][back-to-top]](#readme-top)

</div>

## ⌨️ Local Development

You can use Gitpod for online development:

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]

Or clone it for local development:

```bash
$ git clone https://github.com/lobehub/lobe-assets.git
$ cd lobe-assets
$ pnpm install
$ pnpm start
```

<div align="right">

[![][back-to-top]](#readme-top)

</div>

## 🤝 Contributing

<!-- CONTRIBUTION GROUP -->

<!-- CONTRIBUTION END -->

<div align="right">

[![][back-to-top]](#readme-top)

</div>

## 🔗 Credits

- real-fav-icon: https://realfavicongenerator.net/
- harmonyos-fonts: https://github.com/IKKI2000/harmonyos-fonts

<div align="right">

[![][back-to-top]](#readme-top)

</div>

---

#### 📝 License

Copyright © 2023 [LobeHub][profile-url]. <br />
This project is [MIT](./LICENSE) licensed.

<!-- LINK GROUP -->

[profile-url]: https://github.com/lobehub
[gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-assets

<!-- SHIELD LINK GROUP -->

[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square

<!-- release -->

[release-shield]: https://img.shields.io/npm/v/@lobehub/assets?label=%F0%9F%A4%AF%20NPM
[release-url]: https://www.npmjs.com/package/@lobehub/assets

<!-- releaseDate -->

[release-date-shield]: https://img.shields.io/github/release-date/lobehub/lobe-assets?style=flat
[release-date-url]: https://github.com/lobehub/lobe-assets/releases

<!-- ciRelease -->

[ci-release-shield]: https://github.com/lobehub/lobe-assets/workflows/Release%20CI/badge.svg
[ci-release-url]: https://github.com/lobehub/lobe-assets/actions?query=workflow%3ARelease%20CI

<!-- contributors -->

[contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-assets.svg?style=flat
[contributors-url]: https://github.com/lobehub/lobe-assets/graphs/contributors

<!-- forks -->

[forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-assets.svg?style=flat
[forks-url]: https://github.com/lobehub/lobe-assets/network/members

<!-- stargazers -->

[stargazers-shield]: https://img.shields.io/github/stars/lobehub/lobe-assets.svg?style=flat
[stargazers-url]: https://github.com/lobehub/lobe-assets/stargazers

<!-- issues -->

[issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-assets.svg?style=flat
[issues-url]: https://github.com/lobehub/lobe-assets/issues/new/choose