资讯专栏INFORMATION COLUMN

ionic3开发——记一个使用自定义icon的方法

Rindia / 1305人阅读

摘要:最近在使用和开发一款。期间遇到如何在项目中使用自定义图标字体文件的问题,经过研究,找到了一个解决方法,记录一下。然后,书写一份文件,内容如下字体名和路径等等,根据需要自定义就可以了。

最近在使用ionic3Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题,经过研究,找到了一个解决方法,记录一下。

问题描述

ionic项目提供了一套丰富的图标库,在ionic3中也进行了升级。虽然很实用,但是在实际项目中,还是需要根据视觉稿来增加图标。

通常,我们都会使用@font-face导入自定的字体文件。那么我们怎么将这些图标融入到ionic3的项目中去呢?

下面以ionic3中的tabs组件作为例子,提出一种解决方式。

话说问题是解决了,但是看起来其实并不优雅,不过能解决问题。=.=||

理解ionic3中的图标组件 ionic icon的使用

ionic3中提供图标使用的方式有不少,其中非常重要的组件是:ion-icon,基本的使用方法如下:

name属性是图标的名称,这样ionic就会在这个标签处渲染生成一个图标。其他的用法,还有:

根据不同的设计风格使用不同的图标(ios or md-->Material Design)

设置图标的不同状态

作为特定组件的属性

ionic也为自己的图标库提供了一个预览的页面,Ionicons

tabs组件中使用icon

在例子中,tabs组件使用图标的方式,是这样的:


    
    
    

通过设置tabIcon属性,就可以使用图标库中指定的图标。

仔细看一下渲染后的html结构,你会发现,ion-tab其实是在模板中加入了ion-icon组件:

那么,ionic是如何根据一个name属性,就链接到他的图标库中的图标呢?

ionic使用图标的原理

由于ionic3使用了Angular作为框架开发,因此ion-icon要么是组件,要么是指令。所以我们看看它的源码,是如何实现图标文件的使用的。

源码传送门:ion-icon

从源码中我们可以看到,ionic把ion-icon定义为一个指令,有三个步骤:

进行平台风格(iosmd)判断和状态的判断。

根据判断的结果,将输入的图标名称,进一步组合成为如下形式的格式化文本

ion-{平台风格标识}-{图标名}-{修饰}

将上一步得到的格式文本,添加到元素的class属性中。

至此,也很好理解了,通过一个css类,就可以使用图标库中的字体定义(@font-face)

ionic将自己的图标字体的scss文件放在ionicons.scss中,定义字体名称为Ionicons

而图标库则成为另外一个git项目,相关的类型放在ionicons-icon.scss中。在github中打开源码文件,ctrl+f搜索heart,可以看到css是这样的:

.ion-ios-heart:before { content: "f443"; }
.ion-ios-heart-outline:before { content: "f442"; }

通过伪元素,指明了对应的图标字体。-outline后缀指明的是轮廓形状的图标。

知道了这些,我们就可以自定义字体文件和css类,从而让ion-icon也支持我们自定义的图标了。

准备工作 图标文件

图标文件,一般大家都会用illustrator矢量设计软件设计,然后导出.svg格式的文件。

要打包成字体文件,也有不少工具,常用的是阿里出品的 iconfont。具体使用方法,网站上讲解的非常清楚,这里就不多说了。

当你上传自己的图标svg文件,导入项目,下载完成后,会得到一堆文件。

有3种方式,可以使用图标:

unicode 最原始的方式,但是兼容性好。

fontclass 使用伪元素和css类的方式,与ionic一样,兼容限制ie8+

symbol 唯一支持保留颜色的方式,但是兼容性需要考虑(支持svg的设备和浏览器可以)

在例子中,我们选用fontclass足矣。

部署文件

将生成的字体文件拷贝到ionic项目src目录下assets中(具体目录根据项目的要求,这里只是例子)的fonts目录里。

然后,书写一份.scss文件,内容如下:

@import "ionicons-variables";

$jpicons-font-path: $font-path !default;

@font-face {
  font-family: "jp-icon";
  src: url("#{$jpicons-font-path}/iconfont.eot?t=1493779389504"); /* IE9*/
  src: url("#{$jpicons-font-path}/iconfont.eot?t=1493779389504#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("#{$jpicons-font-path}/iconfont.woff?t=1493779389504") format("woff"), /* chrome, firefox */
  url("#{$jpicons-font-path}/iconfont.ttf?t=1493779389504") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url("#{$jpicons-font-path}/iconfont.svg?t=1493779389504#jp-iconfont") format("svg"); /* iOS 4.1- */
}

.jp-icon {
  font-family:"jp-icon" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

字体名和路径等等,根据需要自定义就可以了。

下一步,就可以定义自己的类名了,由于例子使用Material Design风格,因此,定义如下:

.ion-md-jpicon__evalTab:before { content: "e64e"; }

.ion-md-jpicon__recTab:before { content: "e650"; }

.ion-md-jpicon__storeTab:before { content: "e651"; }

名字的定义按照之前提到的格式化文本的形式就可以,这里由于想说明清楚的原因,我把名字定义的略复杂了一点,实际使用中可以按自己需要修改。

最后别忘了一点,在你的基础样式表,比如:app.scss中导入这个scss文件。

@import "../assets/fonts/jpicons.scss";

无论怎样,当你准备好这些文件时,下一步就可以使用自己的图标字体啦。

使用字体

tabs组件中,可以很方便的使用定义好的字体:

在tabs组件的.scss文件中,我们重新定义在该tabs组件下使用的字体名称:

.jp-tabs{
   .tab-button{
      &>ion-icon{
        font-family:"jp-icon" !important;   /*指定在当前组件中的ion-icon使用的字体名称*/
      }
  }
}

此外,如果有定义图标字体颜色的需求,简单粗暴的方式是:

.tabs-md .tab-button[aria-selected=true]{
  color:$jp-color;
  .tab-button-icon{
    color:$jp-color;
  }
}

当一个tab被选中时,ionic会修改对应组件元素上的aria-selected,值是true/false

运行ionic serve,查看渲染后的效果:

再看html代码,可以验证上面所讲到的内容。

总结

如果自定义组件和指令是不是也可以实现图标字体的使用?我想是可以的。

本文只是提供了一种方法而已,不太优雅,但是可以解决问题。好处是,可以使用ionic中的一些关于图标的功能,例如,在tabs组件中,可以设置tabLayout属性来决定图标和文字的布局关系,如果要自己开发布局等功能,当然可行,但是需要花费时间。作为一种实现,本文的介绍也算作一种方式吧。但作为研究和推敲原理,我想应该更深入的发现更好的方式。

个人能力有限,如果有什么错漏,请大家批评指正,之后会再补充内容。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111974.html

相关文章

  • ionic3开发——一个使用定义icon方法

    摘要:最近在使用和开发一款。期间遇到如何在项目中使用自定义图标字体文件的问题,经过研究,找到了一个解决方法,记录一下。然后,书写一份文件,内容如下字体名和路径等等,根据需要自定义就可以了。 最近在使用ionic3和Angular开发一款App。开发体验还是挺好的。期间遇到如何在项目中使用自定义图标字体文件的问题,经过研究,找到了一个解决方法,记录一下。 问题描述 ionic项目提供了一套丰富...

    myshell 评论0 收藏0
  • 解决ionic2/ionic3轮播图切换页面或者点击过后不动轮图

    摘要:我们在开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况这其实需要一些配置首先在运用到轮播图的中引入然后解决切换其他页面回去轮播图不动问题附轮播图自动轮图的自动轮播间歇时间切换轮播图速度 我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 impo...

    tinyq 评论0 收藏0
  • 解决ionic2/ionic3轮播图切换页面或者点击过后不动轮图

    摘要:我们在开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况这其实需要一些配置首先在运用到轮播图的中引入然后解决切换其他页面回去轮播图不动问题附轮播图自动轮图的自动轮播间歇时间切换轮播图速度 我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 impo...

    Lin_YT 评论0 收藏0
  • 使用Ionic3框架开始第一个混合开发APP

    摘要:什么是框架框架是一个混合开发框架,其本身依赖于,,。使用框架可以做什么使用可以使用前端相关技术快速开发多平台的移动。使用全局安装和。输入,这是添加一个平台的命令。注意这个包是版本,并非正式包,正式包需要先生成签名至此,你就开始了第一个应用。 什么是混合开发? 简单来说,就是在开发移动应用中同时使用Native和Web的开发方式。 什么是Ionic3框架? Ionic3框架是一个混合开发...

    wangshijun 评论0 收藏0

发表评论

0条评论

Rindia

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<