Webpack iconfontの使用
1.Webサイトへのアクセス
サイトIconfont-アリババベクトルアイコンライブラリにアクセスします.
2.使用方法
ダウンロードした圧縮パッケージを開くと、中がこんなに長いのが見えます.
これをeot、iconfont.svg、iconfont.Iconfont.woffフォントファイルはsrc/fontsディレクトリの下にコピーされます.
これをcssファイルはsrc/cssディレクトリにコピーされ、実際の状況に応じてcssファイル内の参照フォントファイルのパスを変更します.たとえば、次のように変更します.@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot?t=1571922600454'); /* IE9 */
src: url('../fonts/iconfont.eot?t=1571922600454#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQYAAsAAAAACGQAAAPJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDDAqENINlATYCJAMQCwoABCAFhG0HQxtCBxEVnEnJfhymW4x803zxxnK7xU7x3xmYU0+W0rp2GSDJCCjtOCkQe4T8InhtP2qAgLD5i3OeQF6YqMuRnD159G2X0jjL6I97p78lPp9lucwxzqMuS6MJFNDYCyTgEsaW4dUuhYPeDASAAHu+SGp6rhw8GEgvAoAsnDdnGviMEqwhk4AHgVbFRAZSDRl4bjd3B0BV8HvyDcHxAAcZBRlYODttJhI/S5/3UtV/lYkeAtZ0egDyNIAC8AUwgIytNBaDRkFfFIIZZHCHbbUiwOe9///zWfKYm/3LAwg4UIBogQh1MS40RIHPEqcAAT7v0YPDFbKwCA+HYd15ANoADgF4Dzjbz+XAgZpZi66R+vobnj5VqJ7Ih9Xez56R58/HaJ7GnX+epL4R6VqvNnc/dUt48kSueqpo0Fg8f06ePdvQdLTDdGa9erTUYkaTpBkB1/0kVf/aM2dZ3/MMvez1qmFTXfUwmGpENNBIZI2iwWxci6W8+YwgqM9ZOwuO0fOUrTYTmizGNA20NJvK5XpHL9rKRWXn5Qg9ZXZja9vQTF11vZmiQRQ1zYWNepnBXpfFjVyVRHbOOfXhxJbS2FKXFjacQ3ZWSRs533THsjJ+wDn7LDv7JvMme7ss+8lk8XYsLpHu7FmzynQV0EBfgsX5g8Kue8er9s6VK7usna13nVqrZ2RjpD+VJCUZJhqCgiRGcoV+SdoDhflP80S+PC4+ynboz+7OLTMzOx+7ze6XXb3vpvhNvvUQsy3W7LxZWflCWdtyHY+sHVpzNNFm/R/e8ICjdlIgszkeMOTTC3w92jg8z6DJUaZkZud5nV86ln4cm/3QUTbbQFmi+CFKLAUA/P9NJSoG3b/SFmoFAPQG9+J3d0KjwanXUwxif/PiY5e8fH55GJz/vzJ0D/HgAJn1c1kdc5jFISrGDC5n2mYG+avycwAE6gH+g1iNvZtCbNY5HSDgYZYAB23YAQUPVxTD+YIMIkJBCzwSQICPjOkiTCwHBWE6ALxtR0BgaD9w0Md5oDB0F8Vwb0EGcz9AC4aMKJz8uyx4dm3e6UYoGDOQMzhVV5pp+BRmvtH0haA0J8D/kTrngTiI8pEXVkhTDOkGkzBr0FSX8ETbYVHU0FDtUXFgmZs0DHXVmwJVl4uTG4IEhjJAmgFHqVW0V5ydCt9/Q0avIFBDVpP6D5GOqx/EAlEH1EtYdcq6lWs6AyPBmAY0UiuBJ9KjggZroKlu5yGFBewAfyMVQj7dVRgsLy7fcA2AgJzA4ggljMiwnZtctZNOVN4d7rPvqMxiAQAAAA==') format('woff2'),
url('../fonts/iconfont.woff?t=1571922600454') format('woff'),
url('../fonts/iconfont.ttf?t=1571922600454') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../fonts/iconfont.svg?t=1571922600454#iconfont') format('svg'); /* iOS 4.1- */
}
次に、次のコードを書きます.
// index.js
import './css/iconfont.css'
// webpack.config.js
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
パッケージコマンドを実行すると、端末のエラーが表示されます.これは、webpackがiconfontをどのように解析するか分からないためです.cssファイルに導入されたフォントファイルです.ここではfile-loaderを使用して指定したファイルにコピーできます.// webpack.config.js
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}，
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}
]
再度パッケージすると、distディレクトリの下にフォントファイルを含むfontsフォルダが生成されていることがわかります.ブラウザプレビューindexを開きます.htmlにはページにアイコンが表示されます.
ダウンロードした圧縮パッケージのdemo_を開くことができます.index.htmlで表示されます.
ダウンロードした圧縮パッケージを開くと、中がこんなに長いのが見えます.
これをeot、iconfont.svg、iconfont.Iconfont.woffフォントファイルはsrc/fontsディレクトリの下にコピーされます.
これをcssファイルはsrc/cssディレクトリにコピーされ、実際の状況に応じてcssファイル内の参照フォントファイルのパスを変更します.たとえば、次のように変更します.
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot?t=1571922600454'); /* IE9 */
src: url('../fonts/iconfont.eot?t=1571922600454#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQYAAsAAAAACGQAAAPJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDDAqENINlATYCJAMQCwoABCAFhG0HQxtCBxEVnEnJfhymW4x803zxxnK7xU7x3xmYU0+W0rp2GSDJCCjtOCkQe4T8InhtP2qAgLD5i3OeQF6YqMuRnD159G2X0jjL6I97p78lPp9lucwxzqMuS6MJFNDYCyTgEsaW4dUuhYPeDASAAHu+SGp6rhw8GEgvAoAsnDdnGviMEqwhk4AHgVbFRAZSDRl4bjd3B0BV8HvyDcHxAAcZBRlYODttJhI/S5/3UtV/lYkeAtZ0egDyNIAC8AUwgIytNBaDRkFfFIIZZHCHbbUiwOe9///zWfKYm/3LAwg4UIBogQh1MS40RIHPEqcAAT7v0YPDFbKwCA+HYd15ANoADgF4Dzjbz+XAgZpZi66R+vobnj5VqJ7Ih9Xez56R58/HaJ7GnX+epL4R6VqvNnc/dUt48kSueqpo0Fg8f06ePdvQdLTDdGa9erTUYkaTpBkB1/0kVf/aM2dZ3/MMvez1qmFTXfUwmGpENNBIZI2iwWxci6W8+YwgqM9ZOwuO0fOUrTYTmizGNA20NJvK5XpHL9rKRWXn5Qg9ZXZja9vQTF11vZmiQRQ1zYWNepnBXpfFjVyVRHbOOfXhxJbS2FKXFjacQ3ZWSRs533THsjJ+wDn7LDv7JvMme7ss+8lk8XYsLpHu7FmzynQV0EBfgsX5g8Kue8er9s6VK7usna13nVqrZ2RjpD+VJCUZJhqCgiRGcoV+SdoDhflP80S+PC4+ynboz+7OLTMzOx+7ze6XXb3vpvhNvvUQsy3W7LxZWflCWdtyHY+sHVpzNNFm/R/e8ICjdlIgszkeMOTTC3w92jg8z6DJUaZkZud5nV86ln4cm/3QUTbbQFmi+CFKLAUA/P9NJSoG3b/SFmoFAPQG9+J3d0KjwanXUwxif/PiY5e8fH55GJz/vzJ0D/HgAJn1c1kdc5jFISrGDC5n2mYG+avycwAE6gH+g1iNvZtCbNY5HSDgYZYAB23YAQUPVxTD+YIMIkJBCzwSQICPjOkiTCwHBWE6ALxtR0BgaD9w0Md5oDB0F8Vwb0EGcz9AC4aMKJz8uyx4dm3e6UYoGDOQMzhVV5pp+BRmvtH0haA0J8D/kTrngTiI8pEXVkhTDOkGkzBr0FSX8ETbYVHU0FDtUXFgmZs0DHXVmwJVl4uTG4IEhjJAmgFHqVW0V5ydCt9/Q0avIFBDVpP6D5GOqx/EAlEH1EtYdcq6lWs6AyPBmAY0UiuBJ9KjggZroKlu5yGFBewAfyMVQj7dVRgsLy7fcA2AgJzA4ggljMiwnZtctZNOVN4d7rPvqMxiAQAAAA==') format('woff2'),
url('../fonts/iconfont.woff?t=1571922600454') format('woff'),
url('../fonts/iconfont.ttf?t=1571922600454') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../fonts/iconfont.svg?t=1571922600454#iconfont') format('svg'); /* iOS 4.1- */
}次に、次のコードを書きます.
// index.js
import './css/iconfont.css'// webpack.config.js
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]パッケージコマンドを実行すると、端末のエラーが表示されます.これは、webpackがiconfontをどのように解析するか分からないためです.cssファイルに導入されたフォントファイルです.ここではfile-loaderを使用して指定したファイルにコピーできます.
// webpack.config.js
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}，
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}
]再度パッケージすると、distディレクトリの下にフォントファイルを含むfontsフォルダが生成されていることがわかります.ブラウザプレビューindexを開きます.htmlにはページにアイコンが表示されます.
ダウンロードした圧縮パッケージのdemo_を開くことができます.index.htmlで表示されます.