使用阿里图标库Iconfont生成字体图标

最新推荐文章于 2026-05-11 14:45:51 发布

原创最新推荐文章于 2026-05-11 14:45:51 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

当前文章被收录于：

CSS

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

该博客介绍了SVG图标在项目中的使用流程。首先上传SVG图标，可按需选择无填充色上传，将其拖拽到指定位置，接着下载文件到本地，解压后把iconfont.css复制到项目指定位置，在根目录下index.html引入，最后进行Webpack打包配置。

1.上传svg图标

在这里插入图片描述

2.将做好的svg图标拖拽到指定位置

在这里插入图片描述
根据需求选择无填充色上传

3.下载上传好的文件到本地

在这里插入图片描述

4.解压后，将iconfont.css复制到项目指定位置

在这里插入图片描述

5.在根目录下index.html引入

在这里插入图片描述

6.webpack打包配置项

plugins: [
    happy_pack('js', ['babel-loader?cacheDirectory=true']),
    new MiniCssExtractPlugin({
      filename: `${resource}/css/[name].[hash].css`,
      chunkFilename: `${resource}/css/[id].[hash].css`
    }),
    //iconfont.css 拷贝到指定位置
    new CopyWebpackPlugin([{
      from: path.resolve('src/assets/iconfont.css'),
      to:`${resource}`,
      ignore: ['.*']
    }]),
],