标签: material-design-icons
vuetifyjs：仅添加使用过的图标来构建
我目前正在使用默认的“材料设计图标”构建一个 vuetifyjs-app。在生产版本中，我只使用了这种字体的 2 个图标（由 vuetify-component 芯片使用）。
按照建议，我包含了完整的 iconfont
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
但是生产构建这迫使用户仅为 2 个图标下载近 0.5MB 的数据。有没有什么办法：
- 在 CDN 请求中仅包含需要的图标或
- 使用 Tree-Shaking 在主 CSS 文件中只包含需要的图标？（我正在使用parcel.js builder）
推荐指数
解决办法
查看次数
Lighthouse：确保在加载 MaterialDesignIcons Webfonts 期间文本保持可见
我想提高使用Vuetify构建的 Web 应用程序的Google Lighthouse分数。
为了提高性能得分，我一直试图摆脱诊断：
确保文本在 webfont 加载期间保持可见
利用字体显示 CSS 功能确保在加载 webfonts 时文本是用户可见的。了解更多
网址：https ://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2 ? v = 4.5.95 (cdn.jsdelivr.net)
这个结果也是Roboto通过https://fonts.googleapis.com安装的，当我添加display=swap到链接时它消失了，如下所示：
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap"
crossorigin>
但是，显然，添加到MaterialDesignIcons css 文件没有任何区别，例如：display=swap
<link
rel="preload"
as="style"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
crossorigin>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
crossorigin>
这样做，诊断项目不会消失。我应该如何加载materialdesignicons.min.css以便在 webfont 加载期间文本保持可见？
推荐指数
解决办法
查看次数
如何在 Web 组件中使用 Material Design 图标？
看起来 mdi 无法在 Web 组件内工作，或者我错过了什么？
我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档是可行的，但它违反了初衷。
<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
"x-webcomponent",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
<span class="mdi mdi-home"></span>
`;
}
}
);
</script>
</body>
</html>
web-component css-import native-web-component material-design-icons
推荐指数
解决办法
查看次数
Vue：离线使用材料设计图标/尺寸
我在我的 vue 项目中使用了materialdesignicons。
require ('../node_modules/@mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'});
我有一些动态创建的图标：
<v-icon>{{ some-mdi-file }}</v-icon>
当我通过 (npm run build) 构建生产时，出现以下错误：
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/materialdesignicons-webfont.someHash.svg (3.77 MiB)
该文件大小很大，因为它包含每个图标，无论是否正在使用。有没有办法通过仅打包所使用的特定图标来缩小文件大小。我应该使用不同的包吗？警告：该项目是离线托管的，因此我需要将字体直接包含在我的项目中。
我查看了 vue-material-design-icons，但看起来它可能不适用于动态图标名称，并且它没有说明整体文件大小/性能。
我也看过这里，但单击“尺寸警告”链接会将我带到一个页面，其中 Vue 部分未填写 https://dev.materialdesignicons.com/getting-started/webfont
推荐指数
解决办法
查看次数
Vuetify 图标显示不正确：它们显示为“$vuetify.icons...”
我遇到了 Vuetify 中的图标无法正确显示的问题，例如下面是Vuetify 扩展面板。我已经尝试过这个问题中的解决方案vuetify icon not shows，但它们对我不起作用。您可以在下面看到 V 形向下图标显示为$vuetify.icons.expand。我试过导入 @mdi/font 这对我没有任何作用......这是我正在使用的代码：
import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify, {
icons: {
iconfont: 'mdi'
}
});
//expansion panels
导入material-design-icons-iconfont/dist/material-design-icons.css，将图标更改为一些奇怪的图标。
请让我知道可能是什么问题以及我还可以尝试什么！
推荐指数
解决办法
查看次数
Electron 中的 Vite + Vue3：如何导入和使用 Material Design 图标 @mdi/font（或任何其他图标字体）
我想将 @mdi/font 图标捆绑到我的应用程序中（它是一个 Electron 应用程序）。
我安装了npm i @mdi/font --save-dev：
"devDependencies": {
"@mdi/font": "^7.0.96",
}
然后我导入了 css/scss，我尝试了几种不同的方法：
- 导入
main.ts：import '@mdi/font/css/materialdesignicons.css'; - 导入为 scss
main.scss：@import './node_modules/@mdi/font/scss/materialdesignicons.scss'; - 导入为 css
base.css：@import './node_modules/@mdi/font/css/materialdesignicons.css';
然后我在标记中使用了 mdi-* css 类：
SideMenu.vue：
<template>
<aside class="menu">
<ul class="action-bar">
<li class="action-item active">
<a class="action-label icon">
<i class="mdi-cog"></i>
</a>
</li>
<li class="action-item">
<a class="action-label icon">
<i class="mdi-home"></i>
</a>
</li>
<li class="action-item">
<a class="action-label icon">
<i class="mdi-content-copy"></i>
</a>
</li>
</ul>
</aside>
</template>
该应用程序启动并运行，但我看到相同的图标。
需要考虑的事项：
- 我不想使用每个图标组件的方法（看不到重点），那是因为我不使用“vue-material-design-icons”等
- 我不想使用 …
推荐指数
解决办法
查看次数
vuetify/mdi 中图标不显示
我想使用图标库，因为它可能对其他事情有好处，所以我决定只使用 Vuetify，因为它除了包含图标的能力之外还包括其他设计优势。
在现有项目中使用 npm 安装 @mdi/js 和 Vuetify 后，我的 src/plugins/vuetify.ts 文件夹中有以下代码：
import "vuetify/styles";
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi"
export default createVuetify({
icons: {
defaultSet: "mdi",
aliases,
sets: {
mdi,
},
},
});
现在要插入图标，建议使用@mdi/js，因为据我了解，只会导入实际使用的图标。
这就是我的 App.vue 的样子：
<script setup lang="ts">
import { mdiAccount } from '@mdi/js';
</script>
<template>
<main>
<v-icon :icon="mdiAccount" size="16" color="white" class="h-25 w-25"/>
</main>
</template>
文档中给出的示例几乎都是这样，只是使用组合 api（除非我犯了错误）...你能发现我犯的错误吗？
推荐指数
解决办法
查看次数
在 Vue 中使用 Material Design 图标
我想在我的 vue 项目中使用 MaterialDesignIcons ( https://materialdesignicons.com/ )。在我的项目中使用这些图标的正确方法是什么？我尝试了以下但出现错误......
纱线添加@mdi/字体
然后在我的 vue 文件中
<template>
...
<mdiLock />
...
</template>
import { mdiLock } from '@mdi/font';
export default {
components: {
mdiLock,
},
}
但是我收到错误This dependency was not found:
推荐指数
解决办法
查看次数
标签 统计
vue.js ×5
vuetify.js ×5
css ×1
css-import ×1
display ×1
javascript ×1
lighthouse ×1
npm ×1
svg ×1
vite ×1
vuejs2 ×1
vuejs3 ×1