Vuetify——使用icon图标

项目中能尽量不使用本地图片，就不使用，涉及到加载问题，尽量使用图标库。

推荐一个好用的图标库：https://materialdesignicons.com/

在项目中是如何使用的呢？
第一步：

创建一个js文件目录如： src/plugins/vuetify.js:

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";Vue.use(Vuetify);export default new Vuetify({icons: {iconfont: "mdi" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'}
});

在main.js引入vuetify.js

import Vue from "vue";
import vuetify from "./plugins/vuetify";
new Vue({  vuetify,render: h => h(App)
}).$mount("#app");

使用图标：


<v-icon color="#bebebe" class="close">mdi-close-circle-outline
</v-icon>

Vuetify——使用icon图标相关推荐

如何快速的给你的项目添加icon图标
如何快速的给你的项目添加icon图标下载软件如何制作图片将制作的图标拖到项目当中设置启动页注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉
用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
解决网页ICON图标无法显示的问题
解决网页ICON图标无法显示的问题参考文章: (1)解决网页ICON图标无法显示的问题 (2)https://www.cnblogs.com/ziyoublog/p/10974406.html 备忘 ...
UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
一.对UITabBar背景和icon图标的一些设置 (1)因为直接给UITabBar设置的背景颜色显示的不纯,半透明的感觉,所以,有时候我们可以直接利用纯色的图片作为背景达到想要的效果: (2)给ic ...
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
Elementui icon图标不显示
文章目录需求原理实现效果 icon图标链接需求需要实现显示icon图标原理不显示的原因是项目中引入的element-ui的版本过低了,低版本的icon中没有代码中需要的图标, 在低版本 ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
动态修改网页icon图标
动态修改网页icon图标 //如果在vue项目中在App.vue下的 created() 中输入 var link = document.querySelector("link[rel*= ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...

Vuetify——使用icon图标

Vuetify——使用icon图标相关推荐

最新文章

热门文章