quasar-cli自定义图标库

quasar cli如何自定义图标库(iconfont成功!!）

  !!!仅适合小白食用，大佬请指教。。。
  这篇教程主要是记录自己解决问题的一个的经过,网上查询了很久,都没有找到合适的。
  “众里寻他千百度，蓦然回首那人却在灯火阑珊处。”官网其实是有教程的，需要有耐心的人才能发现。
  附上官网地址：http://www.quasarchs.com/vue-components/icon
  好了,言归正传,下面请看演示吧!!!

一、处理下载后的iconfont.css文件

// 此处的的路径是处理过的,可以按照这个酌情更改
// url内的路径是可以自定义的
// 我的字体样式是放在quasar脚手架自动生成的css文件中的,酌情修改
@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9 */
  src: url('../fonts/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff2') format('woff2'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg') format('svg'); /* iOS 4.1- */
}

// 此处的类名应该和配置好的类名保持一致
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 以下为具体的图标
.icon-zhuye:before {
  content: "\e606";
}

二、匹配类名

在App.vue中的created()钩子函数中添加配置具体代码如下，仅供参考

// 此处为App.vue文件，以
<script>
export default {
  name: 'App',
  created () {
    this.$q.iconMapFn = (iconName) => {
      // iconName是图标"name"属性的内容
      // iconName对应的是在标签中填写的图标类名

      // 自定义匹配规则，此处是以iconfont为例的，
      // 可以根据自己的图标库，指定规则
      if (iconName.startsWith('icon-') === true) {
        const name = iconName
        return {
          // 最后将处理过的类名传出来
          // cls: 处理过的类名  注意: 此处属性名必须为"cls"
          cls: 'iconfont ' + name
        }
      }
    }
  }
}
</script>

三、引入css文件

• 在根目录下的quasar.conf.js中添加路径
• 如果没有其他图标库的需求可以将quasar.conf.js中的extras内关于字体图标的项注释掉

// 此处为部分代码
...
boot: [
  'axios',
],
css: [
  'app.css',
  'iconfont.css' // 新增iconfont.css
],
...

最后：附上效果图: