Use Heroicons from official package

[pedro-santiago]

Today, we do have a folder called "Heroicons" with all assets inside. We could use @heroicons/vue instead (this would also give us tons of reshaped beautiful icons).

[davidhemphill]

If you're referring to v3 Heroicons, there's a ton of renamed icons, so switching over right now would likely be a breaking change.

[pedro-santiago]

Yeah, I totally agree, managed to create a component for backwards compatibility using this one: tailwindlabs/heroicons#278 (comment)

[pedro-santiago]

However, I'm considering an aggressive change here, since they look really really improved (v3).

[pedro-santiago]

<template>
  <component class="h-5 w-5" :is="getIcon(this.name)"/>
</template>


<script>
import {defineAsyncComponent} from 'vue'

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  setup() {
    function getIcon(iconName) {
      return defineAsyncComponent(() => import('@heroicons/vue/24/outline/'+iconName+'Icon.js'));
    }

    return {
      getIcon
    }
  }
}
</script>```

Defined as a component called `Heroicon` and call this one from sidebar. Works like a charm ;)

[pedro-santiago]

For those who need it. It's possible, but it do takes a while since you will have to change all to use of that new component. Code looks neat since we can ditch all heroicons from resources folder, THUS they look reaaaaally great visually: