0.0.8 • Published 2 years ago
vue-useicon v0.0.8
Vue 3 + Icon
Iconコンポーネントで簡単にIconを利用できます。 Material Icon Bootstrap Icon Line Awesome に対応しています。
Installation
yarn add vue-useicon -D
# or
npm i vue-useicon -DUse 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. 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.