ajk-iconfont
v1.0.4
Published
安居客iconfont制作、管理、查看、版本维护、自动部署的工具
Downloads
7
Readme
ajk-iconfont 制作与管理工具
安居客iconfont制作、管理、查看、版本维护、自动部署的工具
1. setup(只在初次使用时执行)
根据下表将此仓库
[email protected]:_fe/ajk-iconfont.git克隆到相应位置：
|业务|位置|
|---|---|
|user-site|code同级，即user-site上一级|
|三网|胖哥在三网的iconfont上加了版本号，看下跟此工具的版本号控制是否冲突？|
然后：
$ cd ajk-iconfont
$ npm install等待安装完成...（如果安装很慢的话可以将
node_modules文件夹从其他同学的目录里cp过来[，然后再执行一次npm install]）
完成后在ajk-iconfont目录执行:
sudo npm link没有
sudo权限？执行下面的命令也可以，注意把{gg}换成自己在开发机上的名字
$ ln -s /home/{gg}/ajk-iconfont/bin/geticon /home/{gg}/bin/geticon(注意，以上的目的是在系统注册一个可执行的命令行命令，不执行也可以，但此时下面提到的
geticon命令需要用bin/geticon来替换（即加上路径），此时此命令只能在ajk-iconfont目录下执行！)
软链之后需要重新开一个ssh才会生效
然后在
config目录添加ports.json文件，并在其中填入：
{
"port": 6701{自己的端口号}
}
ports.json中配置的是每个同学自己的访问端口，(所有同学分配的端口号请在config/ports_used.json中配置)，ports.json已经被添加到了.gitignore中（所以需要手动添加），以免查看icon时出现端口冲突
2. 新增icon
2.1 如何新增一个icon（以esf_tw业务为例）：
- 拉代码。
- 将设计师提供的
svg命好名之后放到public/svg/目录中相应业务的文件夹下 - 手动更新
config/esf_tw.json配置文件，将新的svg文件的名字添加到svgNames字段里。然后记得更新version！ - 在控制台执行命令：
$ geticon --biz=esf_tw|geticon命令的参数|参数的可选项及意义|
|---|---|
|--biz=|esf_tw/esf_pc/...（即业务名字，与config文件夹里的配置文件名一一对应），必选，否则会报错提示|
|--replace=|true/false，是否将pages里同版本的iconfont资源替换掉（同时更改layout中的引用的版本号），默认不替换|
|--clear=|true/false，是否隐藏控制台的提示，默认不隐藏|
|--fixSvg=|true(默认)/false，是否要自动修复svg，（在svg文件内根据画布大小加上width="" height=""），有的svg文件可能没有设置这两个值，此时可以用这个参数统一加上，以让svg文件统一规范|
⚠️注意：多人开发时或者忘了改版本号导致覆盖了
pages中同名的iconfont文件夹，请相关同学提交代码并解决冲突后重新生成并部署字体文件！
生成完iconfont后一定要检查下icon的样式是否有问题：
2.2 配置文件
配置文件是
config目录里的json格式的文件，命名方式为业务名_平台.json，如esf_pc.json、esf_tw.json，就是执行geticon --biz={esf_pc}时--biz的参数，以esf_pc.json文件为例： ⚠️ 配置文件里只有version字段是每次增加icon时要改的，其余的字段是固定的 ⚠️
{
"version": "font20170207-1", // 版本号
"iconfontDir": "pages/pages-ajk/usersite/site/img/user/", // iconfont文件在pages中的目录
"iconfontConfigDir": ["code/user-site/app-user-common/config/iconfont.php", "code/user-site/app-member-web/config/iconfont.php"], // 版本控制文件的目录(`php`文件)，`layout.css`中的`font-family`读取此中的配置，由于装饰器(`layout.css`)可能有多个，因此此参数是一个`数组`
"fontFamilyName": "iconfont", // css中font-family的名字
"iconFileName": "iconfont", // .eot .woff等字体文件的名字
"svgNames": [ // 所有的要被转换为字体的svg的名字组成的数组，icon的index（从开始）按照此顺序来生成
"餐饮无框",
"打分",
"地标",
"地铁无框",
"点",
...
]
}3. 查看icon
执行以下node命令起服务查看icon：
node app.js需要每个人访问不同的端口（否则多人同时开发时会有端口冲突），请每位开发者将自己的端口号在
config/ports.json中进行配置，并将其添加到.gitignore中
然后访问url查看（url地址在执行node app.js后会有提示给出）,访问页面加载不到的话换个端口号
查看icon的时候发现icon有问题（比如很小），这是因为新加入的svg文件有错误
4. 添加icon时的注意事项
svg推荐用英文命名（方便直接使用其名字），如果有两个相同的图标，一个实心一个空心，空心的结尾加-o(参考bootstrap)- 避免制作相似的
icon，设计师设计了相似的icon的话跟TA沟通！实在是需要的话再去加
⚠ 5. 特别注意！！
5.1 制作svg的画布要统一高度
主要是画布的高度要统一，为了使字体的基线对齐
如果svg文件中存在高度非260px的文件，在转换时控制台会输出错误
5.2 记得及时提交
用
replace=true命令时，pages里的iconfont文件会自动更新，相同版本号的文件夹会被替换！，多人开发的时候就可能会覆盖别人的文件，所以需要及时提交/拉取ajk-iconfont仓库的代码，及时解决冲突以便多人同时使用
5.3 iconfont的规范用法
5.3.1 iconfont图标与文案的垂直对齐，统一按照以下方式进行：
.iconfont {
[display: inline-block;] (layout.css中已经设置好了)
vertical-align: -2px;(自定义数值，以调整垂直对齐)
}
.doc-span {
display: inline-block;
vertical-align: top;
}
并且，保证.iconfont、.doc-span两个元素具有相同的行高(从父级元素继承)，且不能小于字号以上的写法的原理：让
.iconfont、.doc-span两个元素高度一致，都为inlint-block布局，且顶部对齐，这样便可以利用line-height实现垂直居中（iconfont设计时便是居中的），然后调整.iconfont的vertical-align以使图标与文案上下对齐
但是，不同浏览器中的.doc-span元素可能会用不同的font-family渲染，导致对齐时存在1px的偏移
5.3.2 超宽图标的处理方法
在制作超宽图标的时候将画布高度设置为
260px，宽度自适应。例如将画布设为viewbox="0 0 910px 260px"，这样可以避免使用时给图标设置一个很大的font-size
5.3.3 iconfont在firefox浏览器中的问题
windows下的firefox浏览器自带字体渲染，导致文字在渲染时有偏移，由于iconfont跟普通文字不一样，导致其在font-size设置得比较大时偏移比较明显，可以达到2px。处理方式：设置font-size较大的图标时加position:relative;top:-1px，以均衡不同浏览器的样式
查看其他网站，由于是浏览器字体渲染导致的问题，这个问题也存在，如淘宝首页的图标用不同浏览器查看对齐也是不同的
5.4
esf_tw业务用的是bu-iconfont，即base-ui的confont，geticon --biz=esf_tw之后app-user-touch/src/demo.css文件的引用会被自动更新，此文件是base-ui中icon组件的示例代码，不影响业务。在业务中一并提交即可。
6. 常用命令
如果
sudo npm link有权限：
TW端二手房：
geticon --biz=esf_tw --replace=true --clear=true
PC端二手房：
geticon --biz=esf_pc --replace=true --clear=true如果
sudo npm link没有权限（以下命令需要在ajk-iconfont目录执行）：
bin/geticon --biz=esf_tw --replace=true --clear=true
bin/geticon --biz=esf_pc --replace=true --clear=true