一个可能可行的Taro3.x兼容方案

[tourze]

taro-iconfont-cli在Taro3使用相对比较复杂，需要app.js主动引入并声明useComponent。 主要原因是Taro3.0变化了渲染的逻辑，非页面组件不支持声明*.config.js。 既然如此，就有一个最简单的兼容方案，就是直接使用taro原生组件。大概的组件代码如下：

index.weapp.js

import {useState, useEffect} from 'react';
import {Block} from '@tarojs/components';
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 = '#000', 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 === 'xxx') { return <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
  return (
    <Block>
      {name === 'starempty' && (<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' />)}
      {name === 'starfull' && (<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.536z' fill='${(isStr ? colors : colors[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `} className='icon' />)}
    </Block>
  );
};

IconFont.defaultProps = {
  size: 36,
};

export default IconFont;

index.scss 这个可有可无，或者直接合并到上面

.icon {
  background-repeat: no-repeat;
}

这种兼容法，本repo的转换逻辑需要改咯。但是对应的是兼容性应该会提升。就我所知在2.x和3.x应该都兼容。

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

[liuhui1999]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

[liuhui1999]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

[liuhui1999]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

yarn 之后 init 了一个 json 文件 把我得url填入进去 执行npx iconfont-taro 就会再次打开一个vscode 然后 原来这个就 一直在执行这些东西到最后也没生成 文件可以得话能加个vx 聊一下吗

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

yarn 之后 init 了一个 json 文件 把我得url填入进去 执行npx iconfont-taro 就会再次打开一个vscode 然后 原来这个就 一直在执行这些东西到最后也没生成 文件可以得话能加个vx 聊一下吗

yarn 貌似有问题 你看看pnpm安装可以吗

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

yarn 之后 init 了一个 json 文件 把我得url填入进去 执行npx iconfont-taro 就会再次打开一个vscode 然后 原来这个就 一直在执行这些东西到最后也没生成 文件可以得话能加个vx 聊一下吗

我刚刚试过了，pnpm是可以的

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

yarn 之后 init 了一个 json 文件 把我得url填入进去 执行npx iconfont-taro 就会再次打开一个vscode 然后 原来这个就 一直在执行这些东西到最后也没生成 文件可以得话能加个vx 聊一下吗

可以加vx的

[HongxuanG]

具体的转换逻辑在我这个仓库，可以查看参考一下点这里

老哥你这个怎么更换

用法看readme.md文件

yarn 之后 init 了一个 json 文件 把我得url填入进去 执行npx iconfont-taro 就会再次打开一个vscode 然后 原来这个就 一直在执行这些东西到最后也没生成 文件可以得话能加个vx 聊一下吗

问题修复了，现在可以使用yarn安装了，是我bin的问题