Vue 3 + Icon

Iconコンポーネントで簡単にIconを利用できます。 Material Icon Bootstrap Icon Line Awesome に対応しています。

Installation

yarn add vue-useicon -D
# or
npm i vue-useicon -D

Use Icon

<template>
  <div>
    <icon name="icon1" iconset="bi"></icon>
    <icon name="icon2" iconset="la"></icon>
    <icon name="icon3" iconset="mio"></icon>
    <icon name="dir-icon1" iconset="mif"></icon>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { icon } from "vue-useicon"

export default defineComponent({
  name: 'App',
  components: { icon },
})
</script>

Options

| Name | Iconset | Description | | ----------- | ---------------------- | --------------------- | | Bootstrap icon | bi | https://icons.getbootstrap.jp/ | | Line Awesome | la | https://icons8.com/line-awesome | Material Icons : Filled | mif | https://marella.me/material-design-icons/demo/svg/#filled | Material Icons : Outlined | mio | https://marella.me/material-design-icons/demo/svg/#outlined | Material Icons : Round | mir | https://marella.me/material-design-icons/demo/svg/#round | Material Icons : Sharp | mis | https://marella.me/material-design-icons/demo/svg/#sharp | Material Icons : Two-tone | mit | https://marella.me/material-design-icons/demo/svg/#two-tone

License

Material design icons are created by Google.

We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.