现在，随着web前端开发的不断发展，矢量图(svg)在网页设计中的应用也越来越广泛，而对于svg的使用，通常需要对它进行一些处理，以便能够更好地应用到网页中。这时，svg-as-symbol-loader这个npm包就显得尤为重要。
引入svg-as-symbol-loader
首先，我们需要使用npm安装svg-as-symbol-loader包，可以通过以下命令进行安装：
npm install svg-as-symbol-loader --save-dev
配置 webpack.config.js
接着，在webpack.config.js中添加如下loader配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-----------------------
-----------------------
-------------
-
-
-
-其中，svg-transform-loader和svgo-loader是用于处理svg的常用loader。我们主要关注的是svg-as-symbol-loader这个loader。
使用 svg-as-symbol-loader
svg-as-symbol-loader可以帮助我们将svg转化为svg符号，以便在页面中进行复用。使用方法如下：
1. 导入svg
我们需要先使用import语句，将需要添加到页面中的svg导入项目中。
import logo from './logo.svg'
2. 在html中使用svg符号
在需要使用svg的地方，我们将svg作为一个符号添加到html中：
<svg> <use xlink:href="#logo"></use> </svg>
这里，我们通过xlink:href引用了一个id为logo的符号。
3. 配置 svg-as-symbol-loader
最后，我们需要在webpack中配置svg-as-symbol-loader，告诉它如何将svg转化为svg符号。
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
----------------------- -- -- --------------------
-----------------------
-------------
-
-
-
--
-------- -
--- ---------- -- -------------------
------------ -
-
------------ ----
--
-
---------------- -----
-
--
------- ------
--
-我们将svg-as-symbol-loader放在loader的第一位，以便在处理svg之前将其转化为svg符号。接着，我们可以使用svg-sprite-loader插件将多个svg合并为一个，并且配置一些其他的选项，最终生成的符号会被添加到页面中。
示例代码
下面是一个完整的示例代码，以便更好地理解和应用svg-as-symbol-loader。
文件结构
我们新建一个名为example的文件夹，其中包含一个index.html文件和一个index.js文件，以及一个名为logo.svg的svg文件，如下所示：
example/ ├── index.html ├── index.js └── logo.svg
其中，logo.svg包含一个id为logo的svg符号。
index.html
在index.html中，我们添加了一些需要使用logo.svg的元素，如下所示：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------------
-------
------
-------------------------------
---- -------------
---- -----------------
---- -------------------------
------
----- -----------------------------
------
------- --------------------------
-------
-------index.js
在index.js中，我们使用import语句导入logo.svg，并且在它之前添加配置svg-as-symbol-loader的代码，如下所示：
import logo from './logo.svg'
const svg = logo.toString()
const div = document.querySelector('.icon')
div.innerHTML = svg + div.innerHTML这里，我们先将logo.svg转化为字符串，再将它插入到页眉中，以便它被svg-as-symbol-loader处理。
运行项目
最后，我们使用webpack打包项目，并打开生成的index.html文件，即可看到logo.svg已经成功转化为了svg符号。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2b84f33b0ab45f74a8bb40