vue-useicon

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.