# 程式 icon font libarary 的管理流程

目前設計會由 [icomoon](https://icomoon.io/) 管理產生整包 icon font library。
使用 iconmoon 時需注意的是 icon 類別前綴字、並選擇產生 sass 的檔案。

## 流程
1. `設計`會使用 iconmoon 更新 icon 專案包，並把更新的檔案放進專案中。
2. 使用 git 把專案包更新上版控。
3. `設計`通知`程式` icon 專案更新，`程式`會去使用的專案進行更新。

## 專案的使用
1. 在 `package.json` 裡面加上 `"@pickone/treerful-icon": "git+https://[e-mail]/pickone/treerful-icon.git"`，或是直接在專案下使用指令 `npm install git+https://[e-mail]/pickone/treerful-icon.git`
2. 在要引用的地放 import `@pickone/treerful-icon` 資源像是以下

# app.scss
$iconmoon-font-path: '../fonts' !default;
@import '~@pickone/treerful-icon/style.scss'

3. 在`webpack.mix.js` 將資源檔轉譯出 `public/` 資料夾底下

# webpack.mix.js
let mix = require('laravel-mix');

mix.copy('node_modules/@pickone/treerful-icon/fonts', 'public/fonts')
  .sass('resources/assets/sass/app.scss', 'public/css');

## 如何使用 git 管理
首先先在電腦的環境下安裝 git 的環境 command，可參考[git安裝指南](https://git-scm.com/book/zh-tw/v2/%E9%96%8B%E5%A7%8B-Git-%E5%AE%89%E8%A3%9D%E6%95%99%E5%AD%B8)

初次使用 bitbucket 上的專案，先選好要在本機下載專案的位置，然後使用以下指令
> git clone 這個指令就是將遠端 bitbucket 或其他 git server 的專案下載下來

# git clone '專案的 git 位置'

當要更新 bitbucket 的專案時可使用以下指令
> git add . 是將資料夾下的檔案加入 git 的追蹤
> git commit -m 是為這次的更新加入描述與說明
> git push 是將這次的 commit 推到 git server 上

# git add .
# git commit -m '此次更新的描述'
# git push

其他 git 學習可以參考[連猴子都懂的Git入門指南](https://backlog.com/git-tutorial/tw/)

###### tags: `前端` `treerful` `文件` `icon font` `npm package`