ionic4开发之——自定义图标

ionic虽然提供了不少好看图标，但是在实际应用中有时候还是需要自定义。在以前ionic2+使用自定义图标可以参考小军617的《ionic2实战-使用阿里巴巴矢量图标库Iconfont》，主体思想还是跟PC网页使用字体图标一样，只不过自己上传svg生成自定义图标字体，规范了字体图标命名Ionicons和name使用命名。

像我这样的新手一开始也是在网上搜ionic4怎么修改图标，但都没有找到相关文章，其实ionic4使用自定义图标更简单，制作好图标的svg就可以用了，下面就看怎么来用。

1. 使用，mystar是我想要的五角星

<ion-content padding>
  <p>自定义图标</p>
  <ion-icon name="home"></ion-icon>
  <ion-icon name="mystar"></ion-icon>
</ion-content>

2. 报错了

   
   1.png
3. 分享错误，它说打包后的svg下不存在md-mystar.svg文件，那么我们看看ionic自己的home怎么打包进去的呢，找到路径node_modules@ionic\angular\dist\ionic\svg发现所有的图标都这这里，然后再找到项目根目录的angular.json，可以发现

{
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
}

原来它是这样打包到svg文件夹的，那么我们在这个下面在创建一个。

{
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
},
{
    "glob": "**/*.svg",
    "input": "src/assets/svg",
    "output": "./svg"
}

4. 制作svg文件，打开AI制作我们的mystar.svg放到src/assets/svg文件夹下。

   
   2.png
   

   通过对node_modules@ionic\angular\dist\ionic\svg的观察我们也取名叫ios-xxx和md-xxx，注意图标名字只能在AI里创建的时候取好，不然以后再重命名，编译后依然提示找不到svg。

5. 效果

   
   3.png
   

   如果看不到效果，重启和刷新浏览器看看。

6. 最后
   本篇文章很简单，大神请勿见笑。ionic4目前处于beta阶段，没有视频没有书籍，甚至文章也少，bug也不少，如果遇到问题，先去ionic的issues找找解决方案，或者加我们的ionic4开发群：670727319一起学习。