每次要用到圖標的時候都會到 icono 去copypaste，但每次用到的時候尺寸都各不一樣，總是要調整參數，巨煩。當然你可以會想到用zoom、scale來做縮放，但是這樣的縮放會使得線寬也變粗了，不甚滿意。
終于下定心思來改造一個可縮放的圖標庫。github先上：https://github.com/qieguo2016/iconoo，目前提供下載link標簽引入和npm+webpack的引入方式，詳見項目的readme。（喂，求star?。?/strong>
關于改造，一開始的想法就是使用百分比尺寸來改造，然后馬上發(fā)現不可行了，繪制圖標最依賴的兩種手段：border、box-shadow都不可以用百分比，所以這個想法，pass！然后很自然就想到了在單位上做文章，rem？No、No、No，一個庫依賴全局變量那簡直是個笑話。剩下的自然就是em了，在icon級設置font-size，然后icon本身以及后代都以這個font-size為參照，Perfect！
CSS繪圖的原理
使用CSS繪制線條，用到的不外乎兩個屬性：border & box-shadow。而形狀則可以用border-radius、transform控制，位置會用到絕對定位、transform、margin等。CSS的繪圖，做過幾個就知道大概是怎么回事了，歸根到底，還是幾何。
比如最簡單的加號：
View Code
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數據結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式