ant design iconfont 离线

2024年1月11日 140次阅读 来源: 小渝人儿

ant design 的iconfont 字体是调用的阿里的CDN地址，对于一些内网的应用，或者被屏蔽的站点，下载的字体地址就不生效了。官网提供了一种解决方案，替换less变量 @icon-url， 详见： https://github.com/Joannamo/a…

除了这种方案，现提供一种修改通过webpack的配置的方式来修改。

step 1: 下载相应的字体到本地

下载地址：https://ant.design/docs/spec/…

可以把下载的文件放入到public目录中。

step 2: webpack 配置

{
        test: /\.less$/,
        use: [
          require.resolve('style-loader'),
          require.resolve('css-loader'),
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('less-loader'),
            options: {
                modifyVars: {
                    '@font-size-base': '13px',
                    '@text-color': 'fade(#000, 75%)',
                    "@icon-url": '"/iconfont/iconfont"'
                }
            },
          },
        ],
      }

这种方式跟官方的提供的方式相似，只是这里是采用webpack配置的方式，个人认为webpack配置的方式更灵活。

除了上面的方式，更粗暴的方式是直接去ant design里面修改文件中的 @icon-url的地址。

    原文作者：小渝人儿
    原文地址: https://segmentfault.com/a/1190000015848859
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞