Hero icons 2.0 发布

Laravel

Tailwind CSS 的制造商发布了 Heroicons 2.0,这是一组 264 个用于 Web 的手工制作的 SVG 图标。这些图标是从头开始重新绘制的,并具有 24px 实体集:

你可以直接从 Heroicons 网站复制 SVG 到你的项目中,或者使用第一方的 React 和 Vue 库:

// React JS - npm install @heroicons/react
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-6 w-6 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

这是 Vue 3 集成的样子:

<template>
  <div>
    <BeakerIcon class="h-6 w-6 text-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
// Vue 3 - npm install @heroicons/vue
import { BeakerIcon } from '@heroicons/vue/24/solid'

export default {
  components: { BeakerIcon }
}
</script>

Heroicons 2.0 还有一个 Figma 文件,你可以在你的设计项目中使用它。从今天开始在 heroicons.com 上查看它们。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://laravel-news.com/heroicons-2-0

译文地址:https://learnku.com/laravel/t/71181

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1

2.0 比 1.x 好看多了!

4周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!