克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Material Design Svg Icons for Vue.js

本插件用于在 Vue 中展示 Material Design Svg 图标

不过别在意名称,实际上可以用于任意的单色 svg 图标 (如 Font Awesome Svg)

Doc for English

安装

以下使用 @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

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)

图标的宽度和高度,以便于在未设置 widthheight 属性时提供宽高

<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>

开源授权

本项目基于 mdi-vue, 感谢 @therufa 以及 mdi-vue 的所有贡献者

MIT License Copyright (c) 2021 Sherman Chu (https://github.com/yeliulee) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

Material Design Svg Icons for Vue.js 展开 收起
JavaScript 等 2 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化