fix icon in package theme #2

afc163 · 2016-11-22T12:15:26Z

'@icon-url': '/assets/fonts/iconfont/iconfont', should be '@icon-url': '"/assets/fonts/iconfont/iconfont"'. ⚠⚠⚠
babel-plugin-import use style: true.
parse all less as css-modules.

afc163 · 2016-11-22T12:20:45Z

It is the recommaned way.

Trick code is the double quote inside @icon-url.

afc163 · 2016-11-22T12:21:04Z

webpack.config.js

+    if (loader.test.toString() === '/\\.module\\.css$/') {
+      loader.exclude = /node_modules/;
+      loader.test = /\.css$/;
+    }


copy it from https://github.com/dvajs/dva-cli/blob/085a58290b9580a15614184bcfd5fed1a945ed11/boilerplates/demo/webpack.config.js#L15-L34

afc163 · 2016-11-22T12:22:02Z

theme.js

  return {
    '@primary-color': '#1DA57A',
    '@link-color': '#1DA57A',
    '@border-radius-base': '2px',
-    '@icon-url': '/assets/fonts/iconfont/iconfont'
+    '@icon-url': '"/assets/fonts/iconfont/iconfont"',


What makes u fail is missing the ".

{test: /.woff(?v=\d+.\d+.\d+)?$/, loader: 'url?limit=100000&minetype=application/font-woff'},
{test: /.woff2(?v=\d+.\d+.\d+)?$/, loader: 'url?limit=100000&minetype=application/font-woff'},
{test: /.ttf(?v=\d+.\d+.\d+)?$/, loader: 'url?limit=100000&minetype=application/octet-stream'},
{test: /.eot(?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /.svg(?v=\d+.\d+.\d+)?$/, loader: 'url?limit=100000&minetype=image/svg+xml'},

cannot work!!!!!

使用相对路径会报错，绝对路径会导致webpack没有将字体打包~

@chenxiaojie 后面有解决吗

@chenxiaojie 今天花了两个小时研究，发现同样的问题，真是无语，建议antd团队将字体文件随包发布，而需要CDN引用的再定义modifyVars

@phantom0424 没有解决，不优雅的解决了。
将字体和图片放在本项目里面，自己再写一份覆盖。

这个双引号问题确实折腾半天，后来恍然大悟

K-walker · 2017-03-14T07:58:50Z

@afc163 你好，我按照您上面的步骤来做，好像还是无法引用到本地的iconfont，不清楚为何，不知道您能帮我看看嘛？我的代码截图如下
webpack.config.js 文件：

 webpackConfig.babel.plugins.push(['import', {
    libraryName: 'antd',
    style: true
  }])
webpackConfig.module.loaders.forEach(function (loader, index) {
        if (typeof loader.test === 'function' && loader.test.indexOf('\\.less$') > -1) {
          loader.include = /node_modules/
          loader.test = /\.less$/
        }
        if (loader.test === '/\\.module\\.less$/') {
                loader.exclude = /node_modules/
                loader.test = /\.less$/
        }
        if (typeof loader.test === 'function' && loader.test.indexOf('\\.css$') > -1) {
          loader.include = /node_modules/
          loader.test = /\.css$/
        }
        if (loader.test === '/\\.module\\.css$/') {
           loader.exclude = /node_modules/
           loader.test = /\.css$/
        }
   })

package.json 文件：

 "theme":{
          "@icon-url":"'/assets/fonts/iconfont/iconfont'"
   }

如上，我是在package.json中直接引用icon-url ，可页面就是无法获取到本地iconfont，希望您帮我看看，打扰了！

sndraw · 2017-03-31T10:58:10Z

刚过试了一种变通方法，貌似可行。

1.直接复制iconfont目录到node-modules/antd/dist下

2.在需要引用的index.less中加入以下代码，注意顺序不能变

   @import "~antd/dist/antd.less";
   @icon-url:'~antd/dist/iconfont/iconfont';

不过问题有一个，如果要使用babel-plugin-import配置按需引入antd，设置style:true就会出问题，会加载两份css，解决方案目前是不配置style，也就是antd的css不按需引入

K-walker · 2017-04-01T01:35:58Z

@sndraw 官方文档也介绍了，使用theme.js的方式引用iconfont本地资源，是不能配合babel-plugin-import 使用的

kunkkaliu · 2017-06-24T02:22:57Z

"theme":{
"icon-url":"'/assets/fonts/iconfont/iconfont'"
}

是不是去掉@呢

kunkkaliu · 2017-06-24T03:11:42Z

字体文件放在本地还是访问不了

tata9001 · 2017-08-08T08:32:28Z

ant-design/antd-init#156

K-walker · 2017-08-18T02:08:28Z

@kunkkaliu iconfont-demo

Yijun95 · 2017-10-17T04:04:14Z

@afc163 你好，

Failed to decode downloaded font: http://localhost:3000/assets/fonts/iconfont.woff
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/assets/fonts/iconfont.ttf
OTS parsing error: invalid version tag

请问这个错误该怎么解决，谢谢！

shengbeiniao · 2017-10-25T10:21:22Z

建议antd团队将字体文件随包发布，而需要CDN引用的再定义modifyVars

wurong4 · 2017-11-14T06:33:52Z

@EugeneHuang95 遇到了同样的问题，OTS parsing error .有没有解决，求分享方法

yangzhichao926 · 2017-12-01T07:34:28Z

@afc163 我这里利用引入外部字体成功了，但是有一个小问题，就是获得了本地字体文件以后还是会请求cdn去获取两个字体文件并报错，在这里我已经使用按需加载去设置了，并没有用，而且经过多次测试发现是在dist文件夹里的antd.css里面的@font-face的锅，删除该项即可搞定（因为引入的本地有css文件并覆盖）。但是我不想对node_modules文件夹进行操作，请问有解决的办法吗（目前所有网上能找到的办法都试过）

afc163 · 2017-12-01T08:53:18Z

@yangzhichao926 你重复引入了样式，即引入了 less 又引入了 css。去掉 css 的引用就好了。

yangzhichao926 · 2017-12-01T10:19:09Z

@afc163 搞定了大佬，本地icon文件和antd这里全都引用的less，不会报错了

gongxufan · 2017-12-04T08:42:01Z

你们太墨迹了，直接在build的包替换https://at.alicdn.com/t/font_zck90zmlh7hf47vi.tt，字体文件丢到public，然后替换成本地访问地址就可以了。

Restry · 2017-12-09T01:54:11Z

简单方法, 我已经实现了webpack打包字体. 说实话这个问题一直在困扰着我. 之前的解决办法一直是手动复制fonts到node_modules/antd/style/lib/core 目录里面去. 要么就是本地访问. 但是总是有很多问题. 比如: 如果没有放在根目录访问, 那地址就错了. 很麻烦.

现在发现其实直接用相对路径就可以解决. 无奈为啥之前就没有发现呢????

@icon-url: "../../../../../public/fonts/iconfont";

不需要引号里面再包引号之类的. 我的环境是
node : 8.9.3
yarn 1.3.2
引入的是default.less 文件, 内容:
`
@import "~antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件

@import "var.less";
`
变量写到var.less里面

a709691139 · 2017-12-12T08:54:16Z

以解决，按需加载antd的情况下，设置 fonts目录
在package里添加
"theme": {
"primary-color": "#1890ff",
"icon-url": "'~fonts/iconfont'"
},
打包webpack，成功包含font文件

dingq030511 · 2017-12-19T08:04:01Z

@EugeneHuang95 我也遇到同样的问题，create-react-app项目里没有办法直接引用静态文件目录，我只能参考了Restry的方法，在config-overrides.js里通过相对路径来解决，代码如下
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
config = rewireLess.withLoaderOptions({
modifyVars: {
'@primary-color': '#1890ff',
'@icon-url': '"../../../../../fonts/iconfont"'
},
})(config, env);
return config;
};
如果你现在有了更好的解决方法，请告知下。

ycscholes · 2018-01-16T07:33:21Z

@a709691139 , 目前看来最好的答案，补充一点
fonts 目录是在webpack config 中定义

  resolve: {
    alias: {
      fonts: {your fonts path},
    },
  },

297854895 · 2018-01-19T08:41:38Z

@ycscholes 成功配置在create-react-app 下，感谢提点

remotesc2 · 2018-02-01T06:18:55Z

@a709691139
你好，按你这样配置，开发环境没有问题。可是生产环境路径就不对了
你是怎么处理这两种环境下的路径问题？

a709691139 · 2018-02-01T06:34:05Z

@remotesc2
新建fonts文件夹，放入字体文件，改名

// package.json  防冲突， 改字体文件名为antIconfont
"theme": {
    "primary-color": "#1890ff",
    "icon-url": "'~fonts/antIconfont'"
 }

// webpack.js  打包字体到根目录
rules: [{
              test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
              // include: APP_PATH,
              loader: 'url-loader?limit=2192&name=fonts/[name].[ext]'
          },

SanPy · 2018-04-11T08:34:34Z

为什么我配置过这个路径之后，所有Icon引用的图标都编程一个空白方块

SanPy · 2018-04-11T08:36:09Z

tancyan · 2018-04-12T02:27:48Z

@SanPy 好像是你的相对路径不对，根路径是node_modules下的antd的路径，一步步../到你的iconfont的路径就可以了

SanPy · 2018-04-12T03:25:25Z

@tancyan 好像是这样，谢谢！

flyjer6 · 2018-04-13T04:23:06Z

@ycscholes 我把font文件下在src/assets里改名antIconfont
然后在webpackConfig里添加

webpackConfig.resolve.alias = {
    '~fonts': path.resolve(__dirname, "src/assets/antIconfont"),
  }

package里添加

"theme":` {
    "primary-color": "#1890ff",
    "icon-url": "'~fonts/antIconfont'"
  }

不生效呢还要配置什么吗请指点一下

ycscholes · 2018-04-13T13:53:14Z

@nielei19920921

webpackConfig.resolve.alias = {
    'fonts': path.resolve(__dirname, "src/assets/antIconfont"),  // 不需要加 '~'
}

还有检查下webpack配置中是否加了file-loader去处理字体

{
        test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
        use: 'file-loader',
 },

xyzdata · 2018-04-19T05:51:37Z

shit ali

ant-design/ant-design#10105

wszgxa · 2018-04-28T18:10:18Z

心疼自己，真的是不太容易。。。

ganyanchuan1989 · 2018-06-05T05:48:22Z

@EugeneHuang95 字体的静态文件还是需要自己放到执行的目录。'@icon-url': '/assets/fonts/iconfont/iconfont' 这个写法只是字体会从这个地方去找，而且最后一层的iconfont是字体文件名字。

下面是我的解决方案：我把字体下载放到public/antd目录。我字体目录结构：

-- antd
  -- iconFont 
     -- iconfont.iconfont.eot
     -- iconfont.svg
     -- iconfont.ttf
     -- iconfont.woff

所以我的theme.js配置：

module.exports={
    '@icon-url': '/antd/iconFont/iconfont'
}

另外 @afc163，建议你加一下说明，配置本身没有问题，但是容易误导人。最开始看你的配置，我以为字体是打到CSS中，配置的目录是抽离字体放的位置。其实不是，只是字体加载的位置，字体文件资源还是需要自己存放的。

EM-Creations · 2018-06-05T10:45:43Z

Worth adding that in my case, I had to add the 'icon-url': '"/font/iconfont"'; line to my theme's theme.js file.

I also then had to use copy-webpack-plugin to copy the font files to the dist directory.

ganyanchuan1989 · 2018-06-06T14:34:46Z

@EM-Creations use copy-webpack-plugin is good idea.

ghost · 2018-06-27T02:35:48Z

if you use ant design pro, the right solution is here: ant-design/ant-design-pro#1088

qianjiahao · 2018-07-02T03:51:06Z

最新最全解决方案：

安装less
npm install less less-loader
配置webpack中的less loader的options（这里使用了vue-cli，所以在utils文件中配置了）

`

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {
  let lessPolyfill = {}

  if (loader === 'less') { // less-loader对js识别的修正, 对iconfont调用本地文件的修正
    lessPolyfill = {
      javascriptEnabled: true, // 防止在解析less文件中的js语句报错
      modifyVars: {
        '@icon-url': `"/static/fonts/iconfont"` // 修正字体文件地址，注意：这里的iconfont是字体文件的文件名，不是目录名！
      }
    }
  }
  loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
      sourceMap: options.sourceMap,
      ...lessPolyfill
    })
  })
}

`

babel-plugin-import 使用 style: true
将字体文件放入对应的资源文件夹下
修改主文件引用样式文件，由xxx.css -> xxx.less，如:

（旧版）import 'vue-antd-ui/dist/antd.less
（新版）import 'ant-design-vue/dist/antd.less'

完成！

ant版本支持0.6.3、1.1.3均测试过

kwzm · 2018-07-05T06:27:46Z

各位大佬，我用的是其它脚手架，按照官方提供的方法还是无法找到字体文件，麻烦帮忙看一下。

webpack配置：

目录结构：

imaxing · 2018-08-14T07:03:50Z

dva ant 打包部署iconfont字体文件路径出错

kwzm · 2018-08-20T08:07:48Z

经过不断的尝试和参考大家的实现方案，如今终于成功了，不论测试还是生产环境字体文件都是去访问的本地目录。
我的框架并不是dva，是自己找的一个框架，所以我是单独创建了一个theme.js文件，然后exports出去一个配置对象，然后在webpack.config.js里面去设置less-loader的modifyVars，这两步都简单，最容易出错的大概是icon-url的路径怎么定义，如果你是去加载你项目里的字体资源，最保险的是设置相对路径，具体可以参考@imaxing的回答，如果你觉得麻烦你可以去设置webpack的alias，这样就可以像我一样简单的写url了，不过我的webpack比较老，是1.x的，所以实际上我只是设置了resolve.root，就可以直接访问root目录下的所有一级目录了，就像import node_modules下的模块一样，不过现在新的版本不支持了root了，其实alias的道理是一样的，就像@ycscholes所说的，具体代码如下：

目录结构：

theme.js

module.exports = {
  "@icon-url": '"~assets/iconfont/iconfont"'
}

webpack.config.js

const theme = require('../theme')

webpackConfig.module.loaders.push({
  test    : /\.less/,
  loaders : [
    'style',
    BASE_CSS_LOADER,
    'postcss',
    `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`
  ]
})

xygcxy · 2018-08-31T06:38:02Z

macos版本 10.13.6 ，safari 11.1.2 版本.
antd字体是放在本地的，为什么safari有时不请求下载antd字体，这样导致图标显示不出来，有时又能请求，这个是safari的bug吗，chrome没有这个问题。
哪位大神有过此类问题。

kwzm · 2018-12-05T07:50:59Z

其实主要还是less文件里面路径的使用的问题，这里要注意如果你的目录是在alias里面定义过了需要前面加~

fix icon in package theme

d4a6a4b

afc163 commented Nov 22, 2016

View reviewed changes

dxps approved these changes Nov 23, 2016

View reviewed changes

dxps merged commit d4a6a4b into dxps:master Nov 23, 2016

afc163 mentioned this pull request Nov 24, 2016

fix custom @icon-url variable in less way #1

Merged

This was referenced Dec 15, 2016

主题定制里面 package.theme里使用自定义的 @icon-url 没有效果？ ant-design/ant-design#4259

Closed

iconfont本地化 dvajs/dva#398

Closed

在 theme.js修改@icon-url无效 ant-design/antd-init#136

Closed

zuiidea mentioned this pull request Dec 23, 2016

你好，请问一下怎么引入iconfont官网下载的字体图标库，自带的文字图标不够用 zuiidea/antd-admin#14

Closed

afc163 mentioned this pull request Jan 31, 2017

Theme customization options ant-design/antd-init#133

Closed

afc163 deleted the fix-icon-url-in-package-theme branch March 2, 2017 07:12

SecMao mentioned this pull request May 12, 2017

built css file doesn't change font-face url to configaration public path dvajs/dva#903

Closed

Sekhmet mentioned this pull request Jun 2, 2017

Use iconfont for icons instead of fontello busyorg/busy#514

Merged

dxps added the enhancement label Jun 24, 2017

santosfh mentioned this pull request Mar 15, 2018

change fonts source to local path ant-design/ant-design-pro#1088

Closed

afc163 mentioned this pull request Mar 20, 2018

自定义iconfont路径只能用绝对路径？ ant-design/antd-init#166

Closed

renzku mentioned this pull request Apr 10, 2018

如何将umi引用的字体本地化？ umijs/umi#226

Closed

MinHongwei mentioned this pull request Aug 18, 2018

配置主题icon-url后引用无效。。。或者是我不会引用 ant-design/ant-design-pro#2013

Closed

MinjieChang mentioned this pull request Mar 8, 2021

dora + atool-build 升级到 roadhog MinjieChang/myBlog#32

Open

fix icon in package theme #2

fix icon in package theme #2

Conversation

afc163 commented Nov 22, 2016 • edited Loading

afc163 commented Nov 22, 2016 • edited Loading

afc163 Nov 22, 2016

Choose a reason for hiding this comment

afc163 Nov 22, 2016 • edited Loading

Choose a reason for hiding this comment

chenxiaojie Jun 4, 2017

Choose a reason for hiding this comment

chenxiaojie Jun 4, 2017

Choose a reason for hiding this comment

phantom0424 Aug 1, 2017

Choose a reason for hiding this comment

shengbeiniao Oct 25, 2017

Choose a reason for hiding this comment

chenxiaojie Dec 17, 2017

Choose a reason for hiding this comment

zhaoda Dec 21, 2017

Choose a reason for hiding this comment

K-walker commented Mar 14, 2017

sndraw commented Mar 31, 2017 • edited Loading

1.直接复制iconfont目录到node-modules/antd/dist下

2.在需要引用的index.less中加入以下代码，注意顺序不能变

K-walker commented Apr 1, 2017

kunkkaliu commented Jun 24, 2017

kunkkaliu commented Jun 24, 2017

tata9001 commented Aug 8, 2017

K-walker commented Aug 18, 2017

Yijun95 commented Oct 17, 2017

shengbeiniao commented Oct 25, 2017

wurong4 commented Nov 14, 2017

yangzhichao926 commented Dec 1, 2017 • edited Loading

afc163 commented Dec 1, 2017

yangzhichao926 commented Dec 1, 2017

gongxufan commented Dec 4, 2017 • edited Loading

Restry commented Dec 9, 2017

a709691139 commented Dec 12, 2017

dingq030511 commented Dec 19, 2017

ycscholes commented Jan 16, 2018

297854895 commented Jan 19, 2018

remotesc2 commented Feb 1, 2018

a709691139 commented Feb 1, 2018 • edited Loading

SanPy commented Apr 11, 2018

SanPy commented Apr 11, 2018

tancyan commented Apr 12, 2018

SanPy commented Apr 12, 2018

flyjer6 commented Apr 13, 2018

ycscholes commented Apr 13, 2018

xyzdata commented Apr 19, 2018

shit ali

wszgxa commented Apr 28, 2018

ganyanchuan1989 commented Jun 5, 2018 • edited Loading

EM-Creations commented Jun 5, 2018

ganyanchuan1989 commented Jun 6, 2018

ghost commented Jun 27, 2018 • edited by ghost Loading

qianjiahao commented Jul 2, 2018 • edited Loading

kwzm commented Jul 5, 2018

imaxing commented Aug 14, 2018

kwzm commented Aug 20, 2018

xygcxy commented Aug 31, 2018

kwzm commented Dec 5, 2018

afc163 commented Nov 22, 2016 •

edited

Loading

afc163 commented Nov 22, 2016 •

edited

Loading

afc163 Nov 22, 2016 •

edited

Loading

sndraw commented Mar 31, 2017 •

edited

Loading

yangzhichao926 commented Dec 1, 2017 •

edited

Loading

gongxufan commented Dec 4, 2017 •

edited

Loading

a709691139 commented Feb 1, 2018 •

edited

Loading

ganyanchuan1989 commented Jun 5, 2018 •

edited

Loading

ghost commented Jun 27, 2018 •

edited by ghost

Loading

qianjiahao commented Jul 2, 2018 •

edited

Loading