vuetify和@nuxt/vuetify icon 之我见

2020-03-14 23:39:59

封装有封装的好处,也有封装的烦恼,哎。@nuxt/vuetify替我们省了不少使用vuetify的心,但是这家伙却让我们多了研究他的心,因为他改变了很多vuetify的设置方式,研究它的同时还得研究vuetify。

对于v-icon的研究,总的两点。


v-icon 虽然支持svg的icon,但是它并不直接支持svg的文件。


vuetify中v-icon,貌似默认支持  Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5, 我自己单独引入了vuetify 用哪一个图标都没有问题。但是用了@nuxt/vuetify只能用mdi-home这样的。不知道因为啥。肯定是封装后,封装成一个了。

但是我修改vuetify的设置,哪一个图标也都能用。哎,不过多研究了。


总之,他们设置icon的配置,不一样,@nuxt/vuetify需要在nuxt.confing.js中设置。


还有一句话,需要大家理解一下。也是我看源码了解的。


Vuetify comes bootstrapped with support for Material Design Icons, Material Icons, Font Awesome 4 and Font Awesome 5. By default, applications will default to use Material Design Icons.




这句话的最后一句话的意思是,这些图标都能用,是优先使用Material Design Icons.,没找到的话,就去用Font Awesome,代码里面是if else


(isMaterialIcon) {
  .(icon)
} {
  iconType = icon.(delimiterIndex)
  ((iconType)) iconType = }


VIcon.ts


  • 2017-07-26 11:57:00

    Laravel 定时任务

    在 php 中使用定时器是一件不太简单的事情,之前大概只能通过 cron 来实现定时任务。但是在 Laravel5 中,定时任务将会变得很简单。

  • 2017-08-03 21:16:46

    Node.js 里面那些遗失的 ES6 特性

    其实 Node.js 对 ES6 的很多特性都已经开始支持了。 在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级:

  • 2017-08-08 11:17:17

    nginx 反向代理 取得真实IP和域名

    nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递到应用程序中。

  • 2017-08-09 15:14:52

    如何写好.babelrc?Babel的presets和plugins配置解析

    官网是这么说的,翻译一下就是下一代JavaScript 语法的编译器。 作为前端开发,由于浏览器的版本和兼容性问题,很多JavaScript的新的方法都不能使用,等到可以大胆使用的时候,可能已经过去了好几年。Babel就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。

  • 2017-08-15 17:44:21

    glob 介绍

    glob 最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如,lib/**/*.js 匹配 lib 目录下所有的 js 文件。 除了在命令行中,我们在程序中也会有匹配文件路径的需求。于是,很多编程语言有了对 glob 的实现 ,如 Python 中的 glob 模块; php 中的 glob 方法。