国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack自動(dòng)用svg生成iconfont字體圖標(biāo)，支持熱重載

antz / 890人閱讀

摘要：之前生成字體圖標(biāo)，是用的或者是阿里的，將給的圖導(dǎo)入來生成。而且有些庫比使用字體圖標(biāo)會(huì)比較便利。于是最近抽時(shí)間參考開源代碼搞了個(gè)插件，自動(dòng)用生成字體圖標(biāo)，支持熱更新。

之前生成iconfont字體圖標(biāo)，是用的https://icomoon.io/app/ 或者是阿里的https://www.iconfont.cn/ ，將UI給的svg圖導(dǎo)入來生成。但是一直有個(gè)問題，假如需要再次加入幾個(gè)圖標(biāo)時(shí)，又需要重新搞一遍，很麻煩。

而使用svg-sprite-loader的方式，也不是很方便，而且在body下插入一個(gè)超大的svg標(biāo)簽，影響性能不說，看著這么亂的代碼真是挺難受。。而且有些UI庫比使用字體圖標(biāo)會(huì)比較便利。另外字體文件特別是woff也比svg要小很多。

于是最近抽時(shí)間參考開源代碼搞了個(gè)webpack插件，自動(dòng)用svg生成iconfont字體圖標(biāo)，支持熱更新。

插件源碼：webpack-iconfont-plugin-nodejs

執(zhí)行以下命令，可直接查看插件效果：

git clone https://github.com/hzsrc/webpack-iconfont-plugin-nodejs.git
cd webpack-iconfont-plugin-nodejs
npm install
npm run dev
原理及用法

字體及css的生成流程：

熱重載（hot-reload）流程：

使用這個(gè)插件后，開發(fā)時(shí)在src/iconfont/svgs目錄下，修改或添加、刪除svg文件時(shí)，就可以自動(dòng)生成字體圖標(biāo)（支持ttf,woff2,woff,eot,svg）及配套從css樣式、html預(yù)覽了；同時(shí)熱更新立即可以看到效果。

只需一個(gè)配置文件，并以此加入到webpack的plugins即可：

const WebpackIconfontPluginNodejs = require("webpack-iconfont-plugin-nodejs");
const path = require("path");
var dir = "src/iconfont"
module.exports = new WebpackIconfontPluginNodejs({
  fontName: "my-icon",
  cssPrefix: "fii",
  svgs: path.join(dir, "svgs/*.svg"),
  template: path.join(dir, "css.njk"),
  fontsOutput: path.join(dir, "fonts/"),
  cssOutput: path.join(dir, "fonts/font.css"),
  htmlOutput: path.join(dir, "fonts/_font-preview.html"),
  jsOutput: path.join(dir, "fonts/fonts.js"),
  formats: ["ttf", "woff", "svg"],
})

Byebye了我滴icomoon們！

感興趣的小伙伴可以試試~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/100312.html

相關(guān)文章

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請(qǐng)往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

  • webpack4初學(xué)習(xí)

    webpack基于node，因此想要學(xué)習(xí)webpack首先要安裝node。webpack4要安裝node8.2以上版本。 1、安裝webpack 為什么選擇本地安裝，主要是由于以后介紹熱更新這一部分不會(huì)報(bào)錯(cuò)，如果全局安裝熱更新就會(huì)報(bào)錯(cuò)，以本部分為基礎(chǔ)依次介紹，保證各部分不會(huì)出錯(cuò)。 mkdir webpack-test cd webpack-test npm init //初始化npm，都選擇默認(rèn)，...

    Object 評(píng)論0 收藏0

  • 從基礎(chǔ)到實(shí)戰(zhàn) 手摸手帶你掌握新版Webpack4.0詳解 一起讀文檔

    摘要：構(gòu)建構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行代碼，包括如下內(nèi)容。自動(dòng)刷新監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。將文件放入到項(xiàng)目中，在中新建一個(gè)放字體圖標(biāo)的文件夾。 項(xiàng)目地址 github.com/wudiufo/Web… 知識(shí)點(diǎn)概覽： Loader，HMR ,Create React App, Caching, Plug...

    王軍 評(píng)論0 收藏0

  • Icon 進(jìn)化史

    摘要：但它仍有缺陷字體需要加載資源有時(shí)候可能會(huì)出現(xiàn)鋸齒只能被渲染成單色或者的漸變色所以我們要繼續(xù)進(jìn)化。直立人之使用，這里所謂的進(jìn)化并不是本身的進(jìn)化，因?yàn)椴⒉煌碛凇ｋS著外界因素的進(jìn)化，的淘汰，的開始，的機(jī)會(huì)變到來了。 南方古猿之 png sprite showImg(https://segmentfault.com/img/remote/1460000008199114?w=822&h=288...

    superw 評(píng)論0 收藏0

  • React Native圖片資源使用的優(yōu)美方案

    摘要：圖片資源作為與用戶交互的界面元素，在客戶端產(chǎn)品中起到了非常重要的角色作用。在應(yīng)用開發(fā)中，移動(dòng)端與的圖片使用策略也有所不同。端較大的內(nèi)存容量，快速的渲染能力使各類型圖片資源都能得到較好的使用。圖片資源（ jpeg、png、svg、webp ... ）作為與用戶交互的界面元素，在客戶端產(chǎn)品中起到了非常重要的角色作用。在應(yīng)用開發(fā)中，移動(dòng)端與PC的圖片使用策略也有所不同。PC端較大的內(nèi)存容量，快速的...

    fireflow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<