Taro 升级到 3.0.5之后不能显示图标， IconFont 的自定义组件写法是否需要更新？

[zhiyu]

/* eslint-disable */

import Taro from '@tarojs/taro';

const IconFont = (props) => {
  const { name, size, color } = props;

  return <iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} />;
};

IconFont.defaultProps = {
  size: 28,
};

IconFont.config = {
  usingComponents: {
    iconfont: './weapp/weapp',
  },
};

export default IconFont;

IconFont.config 这种写法是不是在Taro 3.0以后不生效了

[fwh1990]

好的，我这周更新一下

[zhiyu]

好的，我这周更新一下

兄弟，我直接更改了index.weapp.js，并在同目录下新建了一个名为index.weapp.config.js的文件，组件能够正常调用，但是dist文件夹下并没有编译后的文件，图标还是不能显示，应该是usingComponents配置没有生效引起的。

index.weapp.js

import Nerv, { Component } from 'nervjs'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

class IconFont extends Component {
  render () {
    const { name, size, color } = this.props;
    return (<iconfont name={name} size={parseFloat(Taro.pxTransform(size))} color={color} />)
  }
}

export default IconFont;

index.weapp.config.js

export default {
  usingComponents: {
    iconfont: './weapp/weapp'
  }
}

[fwh1990]

有点棘手。必须放在 pages/index/index.config.js 里面

export default {
  usingComponents: {
    iconfont: `../../components/iconfont/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
  },
}

而且页面里得直接用原生

<iconfont name="alipay" />

再构思一下

[zhiyu]

有点棘手。必须放在 pages/index/index.config.js 里面

export default {
  usingComponents: {
    iconfont: `../../components/iconfont/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
  },
}

而且页面里得直接用原生

<iconfont name="alipay" />

再构思一下

我先按这个方案做，辛苦了！

[fwh1990]

研究了一个新方案： copy配置 + 全局的一次性usingComponents，但是需要等到taro@3.0.7发布，因为根据这个issue（ https://github.com/NervJS/taro/issues/7098 ），全局usingComponents还有问题

[fwh1990]

还有一种就是继续使用组件内的config：https://github.com/NervJS/taro/issues/5477#issuecomment-586804592 ，但是这个官方还没具体的实现计划

[zhiyu]

研究了一个新方案： copy配置 + 全局的一次性usingComponents，但是需要等到taro@3.0.7发布，因为根据这个issue（ NervJS/taro#7098 ），全局usingComponents还有问题

3.0.7 发布了 等你的新方案

[fwh1990]

https://github.com/NervJS/taro/issues/7098 这个issue又被重置到3.0.8了，尬聊！！

[zhiyu]

NervJS/taro#7098 这个issue又被重置到3.0.8了，尬聊！！

卧槽 那咋们只能等着了

[mitayou]

NervJS/taro#7098 这个issue又被重置到3.0.8了，尬聊！！

卧槽 那咋们只能等着了

如果使用的是：

export default {
  usingComponents: {
    iconfont: `../../components/iconfont/${process.env.TARO_ENV}/${process.env.TARO_ENV}`,
  },
}

那么IDE会报错： S2339: Property 'iconfont' does not exist on type 'JSX.IntrinsicElements'.

这个怎么优雅的忽略？

[fwh1990]

@mitayou @zhiyu 不需要这么做，我已经在做Taro的插件(Plugin)了。到时候组件写法还是和2.x时一样。而usingComponents将变成这样

export { useIconfont } from '../../components/iconfont/helper'; 

export default {
  usingComponents:  {
     iconfont:  useIconfont(),
  }
}

插件有一个功能 https://github.com/NervJS/taro/issues/7274 暂时失效，当这个issue修复时，我们将不再需要写usingComponents了。

我昨晚才想到这个方案，做了2/3，今晚应该可以发布next

[fwh1990]

Hello, taro-iconfont-cli@next已经发布，欢迎使用，唯一需要变更的就是usingComponent

// pages/**/index.config.js

import { useIconFont } from '../../components/iconfont/helper';

export default {
  usingComponents: Object.assign(useIconFont()),
}

不算最好的方案，所以正式版先不发布。有什么更好的建议，欢迎随时反馈

[vivinbear]

Hello, taro-iconfont-cli@next已经发布，欢迎使用，唯一需要变更的就是usingComponent

// pages/**/index.config.js

import { useIconFont } from '../../components/iconfont/helper';

export default {
  usingComponents: Object.assign(useIconFont()),
}

不算最好的方案，所以正式版先不发布。有什么更好的建议，欢迎随时反馈

还是需要在每一个使用iconfont的页面设置usingComponents是么?

[fwh1990]

Hello, taro-iconfont-cli@next已经发布，欢迎使用，唯一需要变更的就是usingComponent

// pages/**/index.config.js

import { useIconFont } from '../../components/iconfont/helper';

export default {
  usingComponents: Object.assign(useIconFont()),
}

不算最好的方案，所以正式版先不发布。有什么更好的建议，欢迎随时反馈

还是需要在每一个使用iconfont的页面设置usingComponents是么?

是的，README有说明。

当官方issue https://github.com/NervJS/taro/issues/7098 被解决时，您只需在根目录src/app.config.ts下填写一次usingComponents而无需在各个pages下重复填写。

当官方issue https://github.com/NervJS/taro/issues/7274 被解决时，您不需要再写usingComponents，整个Step 4文档将被删除。同时当前库会由next转到latest。

[vivinbear]

7098的bug解决了 坐等更新3.0.8 这样不用每个页面都写usingComponents了 多谢大佬提供这么好的项目

[fwh1990]

7098的bug解决了 坐等更新3.0.8 这样不用每个页面都写usingComponents了 多谢大佬提供这么好的项目

昨晚亲测有效。已经做好PR https://github.com/iconfont-cli/taro-iconfont-cli/pull/32/files ，坐等Taro 3.0.8

[languis]

Taro 3.0.8 发布了，大佬等你更新了

[fwh1990]

已经发布 3.0.0 正式版，邀请各位安装尝试。任何问题及时反馈，谢谢

[vivinbear]

貌似 无法显示图标 我是按照文档的步骤一步一步操作的 但是字体图标没显示 也没有报错 不知道错误出在了哪里

[fwh1990]

貌似 无法显示图标 我是按照文档的步骤一步一步操作的 但是字体图标没显示 也没有报错 不知道错误出在了哪里

需要升级到3.0.8呢，请确认一下你的taro版本

[vivinbear]

貌似 无法显示图标 我是按照文档的步骤一步一步操作的 但是字体图标没显示 也没有报错 不知道错误出在了哪里

需要升级到3.0.8呢，请确认一下你的taro版本

已经升级来3.0.8了 taro的版本和插件的版本都是最新的 我在想怎么做个demo来复现一下,看是我项目的问题还是哪里的问题

[vivinbear]

貌似 无法显示图标 我是按照文档的步骤一步一步操作的 但是字体图标没显示 也没有报错 不知道错误出在了哪里

需要升级到3.0.8呢，请确认一下你的taro版本

已经升级来3.0.8了 taro的版本和插件的版本都是最新的 我在想怎么做个demo来复现一下,看是我项目的问题还是哪里的问题

确认了 是我这边的问题 没有修改对应的trim_icon_prefix 抱歉了 目前iconfont一切正常 多谢了

[179778978]

升级3.0以后，按照上面的写法，页面会报元素不存在，请检查你的代码。已经在app.config.js中配置了usingComponents。taro也升级到了3.0.8。编译的是支付宝小程序，貌似这种写法不适合支付宝小程序吧

[fwh1990]

升级3.0以后，按照上面的写法，页面会报元素不存在，请检查你的代码。已经在app.config.js中配置了usingComponents。taro也升级到了3.0.8。编译的是支付宝小程序，貌似这种写法不适合支付宝小程序吧

https://github.com/NervJS/taro/issues/5778 服了taro3 @179778978

[179778978]

升级3.0以后，按照上面的写法，页面会报元素不存在，请检查你的代码。已经在app.config.js中配置了usingComponents。taro也升级到了3.0.8。编译的是支付宝小程序，貌似这种写法不适合支付宝小程序吧

NervJS/taro#5778 服了taro3 @179778978

有时候taro用的心累

[progerchai]

在使用taro@3.1.0 版本搭配 taro-iconfont-cli@3.2.1 出现h5 可以显示图标，微信小程序代码出现iconfont ，但是图标样式不显示，宽度为0 我这边 重新update taro@3.1.0 -> taro@3.2.11 可以显示图标出来

[tourze]

我有个疑惑，为啥不支持在 index.weapp.js 中渲染，一定要加个原生组件？

[tourze]

举个例子，这样的话，index.weapp.js就不用再配置useComponents：

import {useState, useEffect} from 'react';
import './index.scss';

const initSvgSize = 36 / 750 * wx.getSystemInfoSync().windowWidth;
const quot = '"';

function hex2rgb (hex) {
  var rgb = [];

  hex = hex.substr(1);

  if (hex.length === 3) {
    hex = hex.replace(/(.)/g, '$1$1');
  }

  hex.replace(/../g, function(color) {
    rgb.push(parseInt(color, 0x10));
    return color;
  });

  return 'rgb(' + rgb.join(',') + ')';
}

const IconFont = ({ name, size = 36, color, style }) => {
  const [colors, setColors] = useState('');
  const [isStr, setIsStr] = useState(true);
  const [svgSize, setSvgSize] = useState(initSvgSize);

  useEffect(() => {
    setIsStr(typeof color === 'string');
    if (typeof color === 'string') {
      setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color);
    } else {
      setColors(color.map(function (item) {
        return item.indexOf('#') === 0 ? hex2rgb(item) : item;
      }));
    }
    return () => { };
  }, [color]);

  useEffect(() => {
    setSvgSize(size / 750 * wx.getSystemInfoSync().windowWidth);
  }, [size]);

  if (name === 'starempty') {
    return <view style={`background-image: url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1025 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M1024 397.056l-353.792-51.424-158.208-320.576-158.208 320.576-353.792 51.424 256 249.536-60.448 352.352 316.448-166.368 316.448 166.368-60.448-352.352 256-249.536zM512 753.504l-223.456 117.472 42.688-248.832-180.8-176.224 249.856-36.288 111.744-226.4 111.744 226.4 249.824 36.288-180.8 176.224 42.688 248.832-223.456-117.472z' fill='${(isStr ? colors : colors[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `} className='icon' />
  }
  if (name === 'rise') {
    return <view style={`background-image: url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M917 211.1l-199.2 24c-6.6 0.8-9.4 8.9-4.7 13.6l59.3 59.3-226 226-101.8-101.7c-6.3-6.3-16.4-6.2-22.6 0L100.3 754.1c-3.1 3.1-3.1 8.2 0 11.3l45 45.2c3.1 3.1 8.2 3.1 11.3 0L433.3 534 535 635.7c6.3 6.2 16.4 6.2 22.6 0L829 364.5l59.3 59.3c4.7 4.7 12.8 1.9 13.6-4.7l24-199.2c0.7-5.1-3.7-9.5-8.9-8.8z' fill='${(isStr ? colors : colors[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `} className='icon' />
  }
  return null;
};

IconFont.defaultProps = {
  size: 36,
};

export default IconFont;