如何从Heroicons网站复制SVG到你的项目中Tailwind CSS的制作者发布了Heroicons 2.0，这是

Tailwind CSS的制作者发布了Heroicons 2.0，这是一套由264个手工制作的网络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上查看它们。