从React组件获取外部SVG文件

时间:2016-08-12 23:43:54

标签: javascript reactjs svg icons

我正在尝试使用包含所有图标的外部SVG文件在我的React网站上使用SVG图标。

我正在使用<use>标记并从组件中调用它们。但是,我收到一个控制台错误,浏览器无法获取SVG文件(404)。它当前与我的组件jsx文件位于同一文件夹中。

我有一个名为svgSprites.svg的外部文件:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" >
   <path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
   <path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>

在我的组件中:

<svg>
  <use xlinkHref="svgSprites.svg#icon-home"></use>
</svg>

0 个答案:

没有答案