# icon library maker

## 規劃
目前設計會丟出一包資料，其結構如下

/icon-package
  |--/demo-files
    |--demo.css
    |--demo.js
  |--/fonts
    |--iconmoon.svg
    |--iconmoon.eot
    |--iconmoon.woff
    |--iconmoon.ttf
  |--style.css
  |--Read Me.txt
  |--demo.html
  |--selection.json

其中以專案真正需要的是`fonts`資料夾，跟`style.css`的檔案。
目前須考慮的是如何導入開發與設計流程

### Plan A.
將其檔案包裝成 npm 的 package，在專案中直接使用 npm install 來下載整包字體，將其在專案使用。
#### 流程
1. 設計部設計出 icon 後，將其資源更新至 bitbucket 的 icon 專案中。
2. npm 與 bitbucket 的 icon 專案進行連結，隨時監控 icon 專案的更新。
3. 網站專案連結 npm 的 package，使其在專案中使用

#### 考慮
1. 需用公司帳號創辦一個 npm 的帳號
2. npm 免費帳號只能設定公開的 package，設定 private package 需要付費 $7/month
3. icon bitbucket 那包可能就需要設計維護，需要設計懂一些版控下一些指令去部署

### Plan B.
將每次設計不出來的一整包取出 `fonts` 跟 `style.css` 直接複製進專案裡，直接使用。

## 研究
- 如何當 git push 同步更新 npm 的 package 不用手動部署
- npm package 的自動化壓縮與封裝流程
- 確認流程後，撰寫文件可給設計作為管理 icon 的流程與操作
- npm package private for free 的[研究](https://andreybleme.com/2020-05-31/hosting-private-npm-packages-for-free/)

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