iconfont 图标转为字体_前端必备技能 webpack 8. webpack打包处理字体图标文件

最新推荐文章于 2022-10-22 15:25:31 发布

网易爱玩

最新推荐文章于 2022-10-22 15:25:31 发布

阅读量226

点赞数

文章标签： iconfont 图标转为字体

本文链接：https://blog.csdn.net/weixin_30994671/article/details/112148383

版权

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正

博客中的代码位于 码云Git仓库，如有需要可自行下载

点击查看原文即可跳转到 webpack 系列文章目录

准备工作

首先去阿里巴巴的矢量资源库挑选几个看着顺眼的图标，将它们添加到购物车：

打开购物车查看所有添加的图标，确认无误后点击 “下载代码”：

下载完成后压缩包中就包含了页相关字体图标的所有资源，其中含有一个 demo_index.html 的文件，介绍了如何引用字体图标和各种方式的优缺点。

这样我们需要准备的字体图标文件就完成了，接下来我们将其引入到项目中：

Step 1：拷贝到项目路径

我们打开主要的 iconfont.css 文件，找到其中引用的相关文件，并将其一并复制到项目的相应路径中：

Step 2：修改路径

如果在引入时的位置与 iconfont.css 中的位置不同，则需要修改相应的路径；

Step 3：引入

引入字体图标的关键内容是 iconfont.css ，我们只需要在相应位置引入它即可：

// index.jsimport './fonts/iconfont.css'

Step 4：使用

我们一般都会使用font-class的方式来使用字体图标，按照iconfont.css文件中的类名在页面中随意写一些内容：

<body>    <span class="iconfont icon-Txu" style="color: #006cb7;">span>    <span class="iconfont icon-shoutao" style="font-size: 40px;">span>    <span class="iconfont icon-beidaiku">span>body>

Step 5: 安装 loader 并修改配置

处理 .eot | .svg 等等图片资源，我们需要借助 file-loader 或者 url-loader，url-loader 当中封装了 file-loader，这里我们挑选一个使用即可：

npm i file-loader -Dnpm i url-loader -D

安装完毕后我们修改配置文件：

// webpack.config.jsconst { join } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {    mode: "production",    entry: "./src/index.js",    output: {        filename: "index.js",        path: join(__dirname, '/dist/')    },    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader']            },            // 使用 file-laoder 处理相应图片资源            {                // 排除 html css js 文件                exclude: /\.(css|js|html)/,                loader: "file-loader",                options: {                    name: "[name]-[hash:5].min.[ext]",                    // 输出到 dist/fonts/ 文件夹                    outputPath: 'fonts/'                }            }        ]    },    plugins: [        new HtmlWebpackPlugin({            template: './src/index.html',            filename: 'index.html'        })    ]}

搞定，打包完毕后我们就可以在浏览器中查看相应效果了。