npm 包 svgxuse 使用教程

介绍

svgxuse 是一个非常实用的前端工具库，它可以让你在不支持 SVG <use> 元素的浏览器上使用它。你只需要像使用普通的 SVG 图片一样使用它，就能实现图片/图标复用，减少代码冗余。

下面是 svgxuse 的 npm 包使用教程。

安装

使用 npm 进行安装:

npm install svgxuse --save

使用

将 svg 文件转成 symbol

首先，我们需要将需要使用的 svg 文件转成 symbol。可以通过以下步骤实现：

• 打开 svg 文件
• 在 <svg> 标签中添加 id 属性，并赋予一个唯一的名称（例如：id="icon-search"）
• 在 <svg> 标签外面包裹一层 <symbol> 标签，并给它设置一个 id 属性，这个属性值和之前的 id 值相同（例如：id="icon-search"，注意这里是在 <symbol> 标签上设置 id 属性）
• 将包含 <symbol> 标签的内容保存成独立的 svg 文件

引入 svgxuse 库

接着，在需要使用 svg 的页面中引入 svgxuse 库：

<script src="path/to/svgxuse.min.js"></script>

使用 svgxuse

最后，我们就可以在页面中使用 svg 了，示例如下：

<svg class="icon">
  <use xlink:href="#icon-search"></use>
</svg>

其中 <use> 元素的 xlink:href 属性需要指向之前定义的 symbol 的 id。

示例代码

将 svg 文件转成 symbol

假设我们有一个名为 search.svg 的 svg 文件，它的内容如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path fill="none" d="M0 0h24v24H0V0z"/>
  <path d="M10 4C5.58 4 2 7.58 2 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM17.59 16.59L20 19l-3.54 3.54-1.41-1.41L18.17 19l-2.83-2.83 1.41-1.41zM10 6c2.97 0 5.5 1.73 6.71 4.24-.96.38-1.98.58-3.03.58s-2.07-.2-3.03-.58A6.963 6.963 0 0 1 10 6z"/>
</svg>

我们可以将它转成 symbol，代码如下：

<svg id="icon-search">
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0V0z"/>
    <path d="M10 4C5.58 4 2 7.58 2 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM17.59 16.59L20 19l-3.54 3.54-1.41-1.41L18.17 19l-2.83-2.83 1.41-1.41zM10 6c2.97 0 5

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/36346) ，转载请注明来源
[https://www.javascriptcn.com/post/36346](https://www.javascriptcn.com/post/36346)