代码拉取完成,页面将自动刷新
本插件用于在 Vue 中展示 Material Design Svg 图标
不过别在意名称,实际上可以用于任意的单色 svg 图标 (如 Font Awesome Svg)
以下使用 @mdi/js
作为示例
yarn add @mdi/js @yeliulee/vue-mdi-svg
# OR
npm install @mdi/js @yeliulee/vue-mdi-svg
为了更好地适配 Tree Shaking,我们需要自行 import 所需的图标
如果你想一次性导入所有图标, 可以尝试使用 mdi-vue
(建议使用 Vite 构建你的 Vue.js App)
For Vue 2
// main.[js|ts] 根据你的实际项目
import Vue from 'vue';
import MdiSvg from "@yeliulee/vue-mdi-svg/v2"
import App from './App.vue'; // 根据你的实际项目
Vue.use(MdiSvg);
// demo.vue
<template>
<div>
<MdiSvg> {{ mdiAccount }} </MdiSvg>
</div>
</template>
<script>
import { mdiAccount } from "@mdi/js"
export default {
data: () => ({
mdiAccount
})
}
</script>
For Vue 3
// main.[js|ts] 根据你的实际项目
import { createApp } from 'vue'
import MdiSvg from "@yeliulee/vue-mdi-svg/v3" // 或直接 "@yeliulee/vue-mdi-svg"
import App from './App.vue' // 根据你的实际项目
const app = createApp(App)
app.use(MdiSvg)
// etc...
// demo.vue [若不使用 setup 语法则与 vue2 一致]
<template>
<div>
<MdiSvg>{{ mdiWechat }} </MdiSvg>
</div>
</template>
<script setup lang="ts">
import { mdiWechat } from '@mdi/js'
</script>
Nuxt.js 2 / 3 均支持安装 Vue 插件,请自行阅读相对应的文档
path(optional)
svg 图标的 path
子元素的 d
属性
<template>
<div>
<MdiSvg :path="mdiReact" />
</div>
</template>
<script setup lang="ts">
import { mdiReact } from '@mdi/js'
</script>
title
svg 图标的描述性字符串
size(numeric or string; default: 24)
图标的宽度和高度,以便于在未设置 width
或 height
属性时提供宽高
<MdiSvg :size="48"> {{ your icon }} </MdiSvg>
<MdiSvg :width="16" :height="16"> {{ your icon }} </MdiSvg>
width
图标的宽度
height
图标的高度
viewBox
图标的 viewBox
spin
给图标添加一个旋转动画
<MdiSvg spin> {{ your icon }} </MdiSvg>
<MdiSvg :spin="true"> {{ your icon }} </MdiSvg>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。