Styled-icons是一个很棒的集合，可让您通过常见界面在React应用中使用流行的图标集。我们选择此选择，因为我们可以轻松地将不同的图标从各种集合中结合在一起，然后才能获得自己的设备。我们知道，当那个时候到来时，我们可以慢慢切换到自己的集合，通常只会改变导入路径。我们还想使其他人也可以轻松使用我们的图标。

现在，有了我们的图标设置，现在是时候构建我们​​自己的风格的icons软件包并发布它了。在本文中，我将带您走过那段旅程。

SVG-ICON

首先，我们必须查看当前风格的 - 元素是为了我们的目的而复制的。我们使用的样式 - 元音实际上是最终结果。图标的旅程从svg-icons开始，其中所有集合中的各种SVG图标都被带入并生成标准输出。

最初，我们认为我们可以仅复制单个软件包的设置并移至下一阶段。可悲的是，未发布所需的依赖性工具，因此我们只是复制MonorePo并仅用我们自己的软件包替换各种软件包。

由于我们不从NPM软件包导入，因此我们将原始的导出SVG图标放入sources目录中是一个更容易的设置，让脚本照顾其余的。然后，source.js文件看起来像这样：

const glob = require('tiny-glob')
const fs = require('fs')
const path = require('path')

module.exports = async () => {
  const sourceFiles = await glob('source/*.svg', {absolute: true})

  return sourceFiles.map((filename) => {
    const match = filename.match(/([^/]+)\.svg$/)
    return {
      originalName: match[1],
      source: fs.readFileSync(filename).toString(),
      pack: 'literary-universe',
      width: '24',
      height: '24',
    }
  })
}

从无花果出口SVG图标

现在一切都设置了。所有通过pnpm正确运行的依赖项现在是时候测试事物了。我已经从无花果上导出了几个图标，当我打开故事书以看一看时，没有任何图标的地方。

我花了几个小时来弄清楚所有的钟声和哨子。根本的问题是，无花果不会以我们需要的方式导出SVG图标。首先，它将fill="none"添加到开放的svg元素中，这使得一切都是看不见的。如果删除了这些内容，则可能会在图标中得到奇怪的填充物。您可以通过将fill="none"应用于有问题的形状和笔触来解决这一问题，但这将使这些形状在SVG-Icons Builder转换后看不见。这里的问题是SVG未被优化为Web字体。值得庆幸的是，inconly.io有一个utility将您的SVG更改为Webfont兼容的SVG。

最后，如果您愿意，您可以使用svgomg等其他工具进一步优化SVG代码。

使用该修复程序，我们现在准备好优化的SVG-ICONS软件包。

我们自己的样式套件

随着SVG-ICON的出版，我们现在可以跳到最后一步。将这些svg-icons变成样式。

这现在非常容易。像使用SVG-ICONS一样，我们使用相同的单声道存储库，然后用我们自己的包装将packages文件夹内容替换为一个文件夹。

在package.json中，我们需要进行两个更改（除了完成包装的所有重命名外）。首先，我们需要将SVG-ICON添加为依赖项（替换我们最初复制的软件包的依赖关系），最后在scripts中更改generate脚本以引用我们的SVG-ICONS软件包，而不是原来的。

现在通过MonorePo通过PNPM安装，然后运行安装脚本应照顾包装的生成内容。

下一步是什么？

所以现在我们有了事情要做，您可以检查我们的repo中的最终结果。下一步是在我们的图标中添加诸如官方样式 - Icons网站之类的网站，以使在我们的设置中找到图标，尤其是一旦我们的图标集变得更大。

如果您喜欢我的工作，请在GitHub Sponsors ❤️上支持我。