天天看點

iconfont導出的iconfont.svg逆操作

一、背景

有一個半路接手的項目,項目中隻有iconfont.css iconfont.svg等必要檔案,在iconfont官網中沒有對應項目圖示,但是需要新增圖示,是以就想擁有一個完整的圖示庫,以後有需要添加即可。

重點:這裡涉及到iconfont.svg轉換成單個svg檔案,及svg檔案導入iconfont圖示庫的過程。

二、怎麼做

1、打開連結https://icomoon.io/app/#/select

2、接下來的步驟參照圖檔順序

iconfont導出的iconfont.svg逆操作

說明:如果你需要生成可使用的文字圖示可以點選Generate Font按鈕,同樣出現download字眼的時候可以下載下傳

3、下載下傳下來的檔案見下圖,svg檔案夾裡面是所有的單個.svg圖檔

iconfont導出的iconfont.svg逆操作

4、iconfont官網打開準備上傳我們得到的svg檔案夾裡面的所有檔案

iconfont導出的iconfont.svg逆操作

點選上傳圖示1 或者 上傳圖示2 都可以上傳

5、找到要上傳的檔案拖至下圖紅框區域即可

iconfont導出的iconfont.svg逆操作

6、由于有以前使用過的圖示,是以要确認圖示的字首和已經使用的圖示字首一緻,保持能正常使用

參考文章:下載下傳iconfont字型并使用、svg轉換成iconFont

參考文章:通過svg可以轉換成iconfont字型圖示

三、推薦網址

1、http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html  将ttf等檔案直接拖拽到頁面可檢視圖示(如果你不需要新增圖示且沒有圖示庫,但是需要檢視圖檔的話可直接用這個連結)

不完善的請諸位大大可以在評論區補充,後期會統一整理,謝謝