小编Raf*_*cha的帖子

我正在使用 rollup 来捆绑一个 React npm 包，其中包含一个图标组件，该组件将名称作为 prop，并返回一个由 React 组件包装的具有该名称的图标。这是组件代码：

    import sprite from './public/sprite.svg';
    
    function Icon({ name }) {
       return <svg className="svg-wrapper">
          <use href={`${sprite}#${name}`} />
       </svg>
      );
    }

文件夹结构如下：

    import sprite from './public/sprite.svg';
    
    function Icon({ name }) {
       return <svg className="svg-wrapper">
          <use href={`${sprite}#${name}`} />
       </svg>
      );
    }

这是我的汇总配置：

     - src
     - - public 
     - - - sprite.svg
     - - icons
     - - - some-icon.svg
     - - - some-other-icon.svg
     - - index.tsx # component with the code mentioned above

这在 Chrome 中工作得很好（尽管它确实内联了其中的所有 …

我有反应组件从火车上打印行程，我需要用这样的垂直线统一圆圈：

我需要统一这些节点（带有垂直条的圆圈）并且正在寻找一个想法。我正在使用 flex 并且使用包含 3 个子组件的 react 组件呈现项目（一个是时间，一个是节点 - 圆圈，另一个是站和实时）。

我必须从头开始编写 css（使用最大的 flexbox 或网格）。

先感谢您。