1、阿里图标使用帮助
2、简述：
阿里图标三种应用方式：
1> unicode：nicode是字体在网页端最原始的应用方式
a. 兼容性最好，支持ie6+，及所有现代浏览器
b. 支持按字体的方式去动态调整图标大小，颜色等等
c. 因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目（这里的项目时你在阿里图表官网中创建的图表集合）里有多色图标也会自动去色
这里需要注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
2> font-class：unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题
a. 兼容性良好，支持ie8+，及所有现代浏览器
b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用
这里需要注意：本质上还是使用的字体，所以多色图标还是不支持的，如果有需求建议使用symbol的引用方式
3> symbol：全新的使用方式，应该说这才是未来的主流（这种用法其实是做了一个svg的集合，不懂，不管了，能用就行）
a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。
3. 这里仅说明symbol的使用方法（PS：因为微信小程序现在只有image组件支持svg）
首先选择你想使用的图片，加入到购物车，最后点击添加至项目，进入项目可以看到所有你选择的图标，点击 暂无代码，点此生成，记住这个链接，考试要考
这里说明一下，我没有使用到npm的组件包，这表示我需要重新搭建npm环境，嘁！
1> 快速搭建npm环境，yarn没装，不管了，这里只用npm
到你的根目录，打开终端命令（CMD窗口），确保当前目录是项目的根目录，命令：
> npm init -y
这时根目录会多出一个package.json文件
2> 需要使用到mini-program-iconfont-cli（PS：一种适合小程序的多色解决方案），命令：
> npm install mini-program-iconfont-cli --save-dev
这时正在下载支持的组件，耐心等待，会多出一个node_modules文件夹
3> 支持的组件已经下载完了，初始一下，生出配置文件，命令：
> npx iconfont init
出现了，Help 怪。。。
多出一个 iconfont.json配置文件
Usage: npx iconfont-init : generate config file npx iconfont-wechat : generate wechat icon component npx iconfont-alipay : generate alipay icon component npx iconfont-baidu : generate baidu icon component npx iconfont-toutiao : generate toutiao icon component npx iconfont-qq : generate qq icon component
> npx iconfont-wechat
多出一个 iconfont文件夹，这个是为小程序生成的组件
4> 打开iconfont.json配置文件
{ "symbol_url": "阿里官网提供的JS链接，例：//at.alicdn.com/t/font_1616497_b708i6mgh3d.js", ###生成的在线链接 "save_dir": "./iconfont", "use_rpx": false, "trim_icon_prefix": "icon", "default_icon_size": 18 }
5> 组件就需要引用
到app.json 中加上（注意目录）
"usingComponents": { "iconfont": "./iconfont/iconfont" }
6> 建一个页面测试
<iconfont name="iconbolanggu-" size="99"/>
效果：
demo: 链接：https://pan.baidu.com/s/11fiJi9Flfo35MNoTzzUSwQ
提取码：8zzh
-------- 转载请标注
请发表评论