1.0.2 • Published 7 years ago

z-icon v1.0.2

Weekly downloads
3
License
MIT
Repository
-
Last release
7 years ago

关于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来预览效果

生产流程

  1. 设计师出图——.svg文件(建议使用去除颜色后的图片)
  2. .svg文件上传到项目中的./svgs目录下
  3. iconfont.cn网站,上传所有svg图片并生成字体,然后下载代码
  4. 打开下载代码文件夹中的iconfont.css文件,用该文件中的classname定义覆盖掉iconfont.dev.css中所有的classname定义
  5. 下载代码文件夹中的iconfont.woff文件替换掉项目目录中的fonts/iconfont.woff
  6. 上传代码
  7. 运行npm publish(不用编译)
1.0.2

7 years ago