1.0.2 • Published 7 years ago
z-icon v1.0.2
关于z-icon
z-icon
将茶听
项目中使用图标字体抽离成独立的node package
,以方便多个小程序可以共用
Demo地址:http://120.77.37.44/z-icon/demo/
使用z-icon
安装(之前请确保你已经切换为私有npm仓库)
npm i --save z-icon
引入字体
App.vue
中引入
<style lang="scss">
@import "~z-icon/iconfont.css";
</style>
页面内使用
template
中使用
<text class="icon-home"></text>
开发与维护z-icon
编译z-icon
npm run build
预览效果
在执行完编译
后,可用浏览器打开./demo/index.html
来预览效果
生产流程
- 设计师出图——
.svg
文件(建议使用去除颜色后的图片) - 将
.svg
文件上传到项目中的./svgs
目录下 - 去iconfont.cn网站,上传所有svg图片并生成字体,然后
下载代码
- 打开
下载代码
文件夹中的iconfont.css
文件,用该文件中的classname
定义覆盖掉iconfont.dev.css
中所有的classname
定义 - 用
下载代码
文件夹中的iconfont.woff
文件替换掉项目目录中的fonts/iconfont.woff
- 上传代码
- 运行
npm publish
(不用编译)
1.0.2
7 years ago