从内部软件包中使用webpack加载SVG

Question

我有一个应在另一个项目中使用的软件包，现在的问题是，当它与父项目集成时，我无法使用该软件包中加载的svg 在我的webpack配置中，我有

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

当我尝试导入文件时，它将正确读取文件并产生哈希（这是导入的console.log）

8c0ac5df695d44661b940bfba0814236.svg

现在的问题是，当我将此URL传递给样式化组件时，它不显示它。 这是我的包的文件夹结构

src
  components
       component1
           index
           styled
  icons
    svg
     send.svg

我从这样的索引中导入svg文件（所有导入都相对于src）

import send from 'icons/svg/send.svg';

，然后使用接受URL的样式化组件：

export const FooterButton = styled.div`
       mask: url(${props => props.icon}) ;
       -webkit-mask-size: contain;
   `;

检查元素时，背景上的url为

background:url(8c0ac5df695d44661b940bfba0814236.svg)

不返回svg。