Monday, July 15, 2024
HomePHPHeroicons 2.0 are right here | Laravel Information

Heroicons 2.0 are right here | Laravel Information


The makers of Tailwind CSS launched Heroicons 2.0, a set of 264 hand-crafted SVG icons for the net. These icons are redrawn from scratch and have a 24px stable set:

You may both copy the SVG straight from the Heroicons web site into your undertaking, or use the first-party React and Vue libraries:

1// React JS - npm set up @heroicons/react

2import { BeakerIcon } from '@heroicons/react/24/stable'

3 

4operate MyComponent() {

5 return (

6 <div>

7 <BeakerIcon className="h-6 w-6 text-blue-500"/>

8 <p>...</p>

9 </div>

10 )

11}

And here is what the Vue 3 integration seems to be like:

1<template>

2 <div>

3 <BeakerIcon class="h-6 w-6 text-blue-500"/>

4 <p>...</p>

5 </div>

6</template>

7 

8<script>

9// Vue 3 - npm set up @heroicons/vue

10import { BeakerIcon } from '@heroicons/vue/24/stable'

11 

12export default {

13 parts: { BeakerIcon }

14}

15</script>

Heroicons 2.0 additionally has a Figma file, which you need to use in your design initiatives. Get began immediately by checking them out on heroicons.com.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments