1.新建09文件夹，该文件夹下 新建server.js文件和app文件夹。
2.在server.js中输入代码，注意var fs = require('fs')是引入内置file system模块，fs.readFile(filename,callback)是使用fs模块的异步读取文件的方法。
var http = require('http')//引入内置http模块
var fs = require('fs')//引入内置file system模块
http.createServer(function (req, res) {//调用http服务的createServer方法
fs.readFile('./app/index.html', function (err, data) {//异步读取./app/index.html文件
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html' })//发送错误头部信息
res.write('404')////发送错误信息
} else {
res.writeHead(200, { 'Content-Type': 'text/html' })//发送html头部信息
res.write(data.toString())//发送html文件
}
res.end()//结束返回
})
}).listen(8080)//使用8080端口
console.log('run http://127.0.0.1:8080')//服务运行的提示
3.在09>app下新建index.html,输入如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>index首页</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
4.body中的script标签前面输入
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 32 32">
<path></path>
</symbol>
</svg>
<div id="container"></div>
<span id="result"></span>
5.浏览器中打开https://www.iconfont.cn/，搜索首页svg图标，输入home，回车
6.鼠标移动到某一图标上，点击购物车图标（添加入库），再搜索javascript、node.js、mysql、java等图标添加入库；
点击页面右上角的购物车图标，点添加至项目，加入新建项目输入名称temp（自定义名称）
搜索的5个图标添加到temp项目中，鼠标移动图标上，点下载图标
弹出的页面选右下方的复制svg
7.在vscode中把上面复制的代码粘贴到index.html的svg标签后面，Alt+Shift+F代码格式化，显示如下
<svg style="display: none;" >
<symbol id="icon-" viewBox="0 0 32 32">
<path></path>
</symbol>
</svg>
<svg t="1581763720834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="821" width="200" height="200">
<path
d="M426.666667 853.333333 426.666667 597.333333 597.333333 597.333333 597.333333 853.333333 810.666667 853.333333 810.666667 512 938.666667 512 512 128 85.333333 512 213.333333 512 213.333333 853.333333 426.666667 853.333333Z"
p-id="822"></path>
</svg>
8.把上方svg中symbol的id改为id=“icon-home”，下方的svg的viewBox="0 0 1024 1024"替换上方svg的viewBox=“0 0 32 32”，删除下方svg中path的p-id="822"，并把下方的path替换上方的path，最终为
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 1024 1024">
<path
d="M426.666667 853.333333 426.666667 597.333333 597.333333 597.333333 597.333333 853.333333 810.666667 853.333333 810.666667 512 938.666667 512 512 128 85.333333 512 213.333333 512 213.333333 853.333333 426.666667 853.333333Z">
</path>
</symbol>
</svg>
<div id="container"></div>
<span id="result"></span>
9.用同样的方法再添加其它svg图标，最终svg图标的代码
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 1024 1024">
<path
d="M426.666667 853.333333 426.666667 597.333333 597.333333 597.333333 597.333333 853.333333 810.666667 853.333333 810.666667 512 938.666667 512 512 128 85.333333 512 213.333333 512 213.333333 853.333333 426.666667 853.333333Z">
</path>
</symbol>
<symbol id="icon-javascript" viewBox="0 0 1024 1024">
<path
d="M416 176.002h-160v424.996c0 105.16-36.064 134.522-98.824 134.522-29.41 0-55.896-5.042-76.5-12.126L64 847.808C93.4 857.932 138.518 864 173.814 864 317.91 864 416 796.258 416 602.04V176.002zM764.926 160C610.04 160 512 247.996 512 364.308c0 100.166 75.502 162.88 185.282 203.33 79.4 28.316 110.784 53.616 110.784 95.078 0 45.512-36.278 74.85-104.896 74.85-63.726 0-121.578-21.28-160.788-42.51v-0.042L512 821.454c37.278 21.276 106.882 42.51 182.334 42.51C875.708 863.96 960 766.86 960 652.568c0-97.1-53.916-159.8-170.556-204.326-86.278-34.382-122.54-53.59-122.54-97.084 0-34.4 31.376-65.738 96.086-65.738 63.692 0 107.488 21.414 133.01 34.582l38.25-128C894.25 174.44 840.376 160 764.926 160z">
</path>
</symbol>
<symbol id="icon-node.js" viewBox="0 0 1024 1024">
<path
d="M512 917.333c-10.667 0-21.333-2.133-32-8.533l-100.267-59.733c-14.933-8.534-8.533-10.667-2.133-12.8 19.2-6.4 23.467-8.534 44.8-21.334 2.133-2.133 4.267 0 6.4 0l76.8 44.8c2.133 2.134 6.4 2.134 8.533 0l296.534-170.666c2.133-2.134 4.266-4.267 4.266-8.534v-339.2c0-4.266-2.133-6.4-4.266-8.533L514.133 162.133c-2.133-2.133-6.4-2.133-8.533 0L209.067 332.8c-2.134 2.133-4.267 4.267-4.267 8.533v341.334c0 4.266 2.133 6.4 4.267 8.533l81.066 46.933c44.8 21.334 70.4-4.266 70.4-29.866v-339.2c0-4.267 4.267-8.534 8.534-8.534h38.4c4.266 0 8.533 4.267 8.533 8.534v339.2C416 768 384 800 328.533 800c-17.066 0-29.866 0-68.266-19.2l-76.8-44.8c-19.2-10.667-29.867-29.867-29.867-53.333V341.333c0-21.333 12.8-42.666 32-53.333l296.533-170.667c19.2-10.666 44.8-10.666 61.867 0L840.533 288c19.2 10.667 32 32 32 53.333v341.334c0 21.333-12.8 42.666-32 53.333L544 906.667c-10.667 8.533-21.333 10.666-32 10.666z m238.933-337.066c0-64-42.666-81.067-134.4-93.867-91.733-12.8-102.4-19.2-102.4-40.533 0-17.067 8.534-42.667 76.8-42.667 61.867 0 83.2 12.8 93.867 53.333 0 4.267 4.267 6.4 8.533 6.4h38.4c2.134 0 4.267 0 6.4-2.133 2.134-2.133 2.134-4.267 2.134-6.4-6.4-70.4-53.334-104.533-149.334-104.533-85.333 0-134.4 36.266-134.4 96 0 64 51.2 83.2 132.267 91.733 98.133 8.533 104.533 23.467 104.533 42.667 0 34.133-27.733 46.933-89.6 46.933-78.933 0-96-19.2-102.4-59.733 0-4.267-4.266-6.4-8.533-6.4h-38.4c-4.267 0-8.533 4.266-8.533 8.533 0 49.067 27.733 108.8 157.866 108.8 93.867 2.133 147.2-34.133 147.2-98.133z"
fill="#F15533"></path>
</symbol>
<symbol id="icon-mysql" viewBox="0 0 1024 1024">
<path
d="M469 760.5c-4.778-3.192-9.256-6.834-13.645-10.565-4.379-3.748-8.595-7.688-12.723-11.722-8.259-8.068-16.038-16.631-23.51-25.456-7.48-8.822-14.56-17.985-21.373-27.347a550.604 550.604 0 0 1-19.545-28.724c-12.449-19.547-23.873-39.762-34.321-60.466a873.506 873.506 0 0 1-15.085-31.352c-4.801-10.559-9.375-21.219-13.781-31.949l19.75 2.354a262.987 262.987 0 0 1-7.914 11.631 170.025 170.025 0 0 1-4.32 5.732c-1.521 1.918-3.108 3.837-4.975 5.832l0.675-0.742c0.063-0.068-0.047 0.072-0.087 0.132l-0.185 0.258-0.402 0.572-0.836 1.236a84.273 84.273 0 0 0-1.661 2.623 98.899 98.899 0 0 0-3.119 5.53 108.394 108.394 0 0 0-5.288 11.646c-3.057 7.955-5.149 16.208-6.132 24.495a95.089 95.089 0 0 0-0.536 6.22l-0.034 0.777-0.018 0.389-0.008 0.194-0.004 0.097-0.065 0.738-0.153 1.781-0.307 3.563-1.228 14.255-2.518 28.503-0.83 9.394-9.144 3.216c-0.707 0.248-0.778 0.258-1.01 0.33l-0.515 0.145-0.825 0.201a22.705 22.705 0 0 1-3.675 0.504 25.96 25.96 0 0 1-3.995-0.082 29.4 29.4 0 0 1-6.658-1.461c-3.968-1.37-7.11-3.246-9.812-5.195-5.357-3.947-9.086-8.236-12.334-12.481-3.216-4.263-5.85-8.552-8.22-12.843-2.357-4.292-4.43-8.59-6.328-12.89a214.11 214.11 0 0 1-2.719-6.453l-1.273-3.228-0.715-1.974-0.594-1.719a234.842 234.842 0 0 1-4.05-13.315 305.755 305.755 0 0 1-5.994-26.732c-3.205-17.972-4.848-36.317-4.547-54.879 0.292-18.547 2.622-37.336 7.612-55.752l0.155-0.573 0.589-1.544 1.51-3.959 1.516-4.107a453.622 453.622 0 0 0 2.916-8.267c1.879-5.519 3.665-11.037 5.229-16.476 1.557-5.416 2.931-10.835 3.777-15.677 0.417-2.375 0.683-4.68 0.695-6.112 0.017-0.672-0.064-1.177-0.046-0.749 0.024 0.212 0.066 0.701 0.387 1.697 0.342 0.985 0.95 2.65 2.76 4.834l-2.101-2.534-1.249-2.911 0.229 0.535c0.014 0.034 0.015 0.04 0.008 0.032l-0.088-0.138-0.347-0.547a26.681 26.681 0 0 0-1.001-1.421 37.253 37.253 0 0 0-2.643-3.133c-1.974-2.108-4.3-4.15-6.852-6.035l-1.729-1.277-1.5-1.793-1.313-1.569-1.054-1.306-1.972-2.531a192.445 192.445 0 0 1-3.686-5.001 230.532 230.532 0 0 1-6.787-10.09 257.223 257.223 0 0 1-11.921-20.857 273.754 273.754 0 0 1-17.984-44.381 268.892 268.892 0 0 1-3.263-11.563l-0.187-0.728-0.093-0.364-0.023-0.091c-0.18-0.694 0.219 0.842 0.169 0.655l-0.037-0.125-0.353-1.194-0.75-2.487-1.562-5.025a511.803 511.803 0 0 0-6.759-19.952c-2.379-6.548-4.889-12.99-7.559-19.088-1.333-3.044-2.713-6-4.113-8.763-1.392-2.753-2.84-5.348-4.172-7.38-0.711-1.096-1.042-1.5-2.339-3.25l-3.257-4.374-6.546-8.734a1961.297 1961.297 0 0 0-13.167-17.312l-6.6-8.482c-2.188-2.784-4.39-5.551-6.498-8.093l-1.534-1.821-0.712-0.821-0.167-0.19-0.082-0.093-0.731-0.874-0.145-0.181-0.657-0.838a110.883 110.883 0 0 1-4.129-5.736c-2.561-3.806-4.936-7.76-7.134-12.12-2.185-4.369-4.215-9.109-5.761-14.762-0.765-2.829-1.399-5.907-1.743-9.334-0.337-3.421-0.379-7.232 0.223-11.384 0.592-4.132 1.906-8.638 4.101-12.865 2.171-4.231 5.186-8.07 8.425-11.042 3.249-3.007 6.646-5.201 9.867-6.876l0.152-0.08c-1.256 0.66 0.467-0.25 0.19-0.098l0.858-0.416a33.4 33.4 0 0 1 1.214-0.536 36.775 36.775 0 0 1 1.9-0.732 41.296 41.296 0 0 1 3.167-0.982 48.583 48.583 0 0 1 5.441-1.122c6.77-0.971 12.48-0.657 17.824 0.027 5.319 0.713 10.173 1.899 14.754 3.312 9.141 2.853 17.184 6.615 24.708 10.72l-2.365-1.149 4.257 1.833 4.044 1.803a388.87 388.87 0 0 1 7.998 3.72 376.026 376.026 0 0 1 15.892 8.057c5.302 2.862 10.609 5.898 16.021 9.377a145.921 145.921 0 0 1 8.25 5.696c2.811 2.106 5.687 4.408 8.765 7.365l0.647 0.621 0.931 1.056-0.403-0.457c-0.025-0.027-0.02-0.022-0.012-0.015l0.143 0.135c0.134 0.125 0.316 0.286 0.51 0.447 0.393 0.326 0.839 0.662 1.288 0.96a13.453 13.453 0 0 0 2.607 1.371c0.805 0.306 1.498 0.475 2.146 0.551 0.649 0.08 1.267 0.073 1.998-0.023l2.196-0.287 1.908 0.074 4.452 0.173 4.293 0.209c2.854 0.151 5.703 0.325 8.559 0.521 5.711 0.395 11.443 0.88 17.266 1.511 5.832 0.639 11.723 1.401 17.956 2.527 3.126 0.571 6.335 1.229 9.822 2.134 1.748 0.457 3.57 0.977 5.554 1.644 1.989 0.675 4.136 1.471 6.722 2.712l-2.742-1.131 2.03 0.732 1.743 0.654 3.355 1.306c2.204 0.875 4.365 1.764 6.507 2.669a404.28 404.28 0 0 1 12.652 5.609 478.77 478.77 0 0 1 24.511 12.244c16.065 8.584 31.596 18.063 46.622 28.315 15.016 10.262 29.527 21.305 43.35 33.209a475.842 475.842 0 0 1 20.246 18.436 473.967 473.967 0 0 1 9.724 9.668l2.386 2.464 1.188 1.238 0.074 0.077c-0.277-0.276 0.725 0.728-0.603-0.599l0.166 0.161 0.408 0.399 0.68 0.673a282.783 282.783 0 0 1 4.969 5.094c6.381 6.723 12.382 13.517 18.237 20.454a557.655 557.655 0 0 1 16.976 21.183 545.37 545.37 0 0 1 30.712 44.703c9.505 15.416 18.25 31.356 26.025 47.835 7.776 16.474 14.66 33.457 20.276 50.948l-0.78-2.006a4216.08 4216.08 0 0 0 17.072 39.002c5.756 12.982 11.534 25.947 17.422 38.812 5.895 12.846 11.853 25.683 17.981 38.084a437.137 437.137 0 0 0 4.634 9.101l1.163 2.188 0.29 0.537 0.145 0.269 0.019 0.033c-0.194-0.326 0.462 0.777-0.432-0.723l0.03 0.052 0.075 0.125 0.647 1.064 2.684 4.329a288.72 288.72 0 0 0 5.43 8.349c0.891 1.31 1.778 2.58 2.559 3.641 0.384 0.521 0.748 0.995 0.967 1.271 0.101 0.128 0.17 0.211 0.092 0.142l-0.305-0.276c-0.147-0.126-0.501-0.448-1.053-0.853l-1.844-1.229c-0.078-0.044 0.04 0.028 0.085 0.056l0.204 0.124 0.462 0.272 0.998 0.573 2.108 1.162c1.435 0.772 2.906 1.527 4.391 2.26a146.183 146.183 0 0 0 9.053 4.085c6.096 2.502 12.279 4.54 18.294 5.886l1.903 0.426 0.987 0.392 26.038 10.337 13.052 5.291 6.61 2.749 3.424 1.469 1.847 0.824 1.054 0.487 1.403 0.686 1.028 0.503 0.785 0.54a4825.82 4825.82 0 0 1 30.059 20.816c5.002 3.487 9.99 7.002 14.972 10.556 4.986 3.555 9.962 7.123 14.979 10.814l-1.13-0.724 3.057 1.931 2.914 1.9a308.395 308.395 0 0 1 5.752 3.889c3.813 2.642 7.591 5.378 11.359 8.312 3.772 2.953 7.518 6.039 11.347 9.777 1.919 1.897 3.86 3.925 5.91 6.599 1.024 1.357 2.088 2.876 3.173 4.908a26.539 26.539 0 0 1 1.593 3.629c0.499 1.441 0.97 3.174 1.163 5.353l1.549 17.479-17.22-1.016-1.628-0.096-1.757-0.084-3.564-0.134-7.196-0.169a405.242 405.242 0 0 0-14.459 0.032c-9.643 0.194-19.272 0.724-28.803 1.67-9.528 0.95-18.97 2.313-28.155 4.28-9.175 1.962-18.141 4.481-26.382 7.971l-1.506 0.638-1.678 0.324c0.103-0.02-0.039-0.001-0.083 0.004l-0.225 0.029-0.504 0.076-1.064 0.192c-0.718 0.142-1.437 0.307-2.133 0.489-1.392 0.365-2.703 0.808-3.789 1.275-1.082 0.459-1.927 0.973-2.309 1.251-0.196 0.135-0.266 0.196-0.254 0.124 0.004-0.065 0.1-0.283 0.131-0.547l-2.131-9.91 0.391 0.503 0.264 0.357 0.461 0.656c0.293 0.426 0.561 0.837 0.82 1.247 0.519 0.819 0.996 1.63 1.447 2.444a55.545 55.545 0 0 1 2.424 4.941 58.013 58.013 0 0 1 3.345 10.329l-1.177-2.833c0.471 0.846 1.073 1.875 1.634 2.819l1.743 2.895a238.221 238.221 0 0 0 3.612 5.739c2.463 3.788 5.025 7.498 7.699 11.054 2.672 3.55 5.462 6.963 8.369 10.021 1.452 1.525 2.937 2.956 4.421 4.217 1.478 1.254 2.978 2.343 4.307 3.078l1.53 0.846 1.061 1.111c-0.09-0.094 0.002 0.013 0.021 0.036l0.129 0.149 0.309 0.341 0.698 0.732a58.307 58.307 0 0 0 1.537 1.511 94.16 94.16 0 0 0 3.339 3.016 163.819 163.819 0 0 0 7.197 5.84c4.959 3.8 10.166 7.406 15.496 10.864 10.67 6.923 21.861 13.222 33.241 19.228l8.671 4.483a336.21 336.21 0 0 1 8.675 4.752c5.723 3.246 11.366 6.615 16.885 10.192 5.521 3.569 10.942 7.301 16.196 11.27 5.255 3.965 10.343 8.18 15.064 12.805l-0.16-0.126a165.855 165.855 0 0 1 4.936 4.055 158.83 158.83 0 0 1 4.766 4.224 93.983 93.983 0 0 1 4.544 4.475c1.46 1.55 2.873 3.154 4.116 4.906l-0.182-0.145L940 921.5l-8.715-3.544-0.084-0.034-0.098-0.11c-1.368-1.547-2.905-2.955-4.485-4.308-1.583-1.352-3.228-2.636-4.889-3.896a154.889 154.889 0 0 0-5.074-3.67 163.198 163.198 0 0 0-5.19-3.467l-0.16-0.126c-10.039-7.954-21.155-14.521-32.529-20.49a384.725 384.725 0 0 0-17.311-8.484 324.208 324.208 0 0 0-8.792-3.883l-9.001-3.721c-12.111-5.08-24.041-10.69-35.727-17.008-5.839-3.171-11.609-6.527-17.275-10.201-2.831-1.842-5.643-3.753-8.407-5.822a112.246 112.246 0 0 1-4.136-3.231 72.053 72.053 0 0 1-2.07-1.762l-1.057-0.958-0.55-0.523-0.293-0.289-0.395-0.409 2.591 1.957c-2.909-1.328-5.331-2.895-7.575-4.52-2.232-1.632-4.268-3.343-6.195-5.095-3.849-3.508-7.292-7.179-10.564-10.932-3.267-3.755-6.343-7.597-9.303-11.509a257.628 257.628 0 0 1-4.351-5.93 182.788 182.788 0 0 1-2.111-3.025 146.07 146.07 0 0 1-2.115-3.168l-0.626-0.969-0.551-1.864a37.106 37.106 0 0 0-2.567-6.422 34.048 34.048 0 0 0-1.694-2.938 27.981 27.981 0 0 0-0.913-1.325l-0.445-0.581-0.198-0.239-0.075-0.083c-0.011-0.012-0.02-0.021-0.02-0.019 0.009 0.012-0.03-0.031 0.065 0.086l-3.584-4.411 1.452-5.499a20.31 20.31 0 0 1 2.568-5.799 23.363 23.363 0 0 1 3.541-4.261c2.478-2.348 4.961-3.897 7.346-5.159 2.392-1.247 4.716-2.183 7.025-2.965a58.037 58.037 0 0 1 5.244-1.497l0.922-0.207 0.49-0.102 0.634-0.116-3.184 0.962c9.874-4.932 20.025-8.493 30.219-11.316 10.204-2.797 20.462-4.867 30.728-6.485 10.269-1.611 20.549-2.761 30.844-3.555 5.148-0.396 10.301-0.7 15.47-0.913 2.585-0.108 5.173-0.187 7.775-0.229l3.921-0.047 1.986-0.003 2.112 0.02-15.67 16.463a9.13 9.13 0 0 0 0.417 2.155c0.129 0.399 0.213 0.574 0.229 0.637 0.031 0.106-0.167-0.18-0.497-0.548-0.671-0.771-1.802-1.896-3.07-3.012-2.571-2.271-5.714-4.651-8.977-6.943-3.277-2.301-6.726-4.552-10.242-6.738a285.332 285.332 0 0 0-5.325-3.228l-2.683-1.565-2.585-1.461-0.25-0.141-0.881-0.583c-4.926-3.263-9.98-6.524-15.044-9.77l-15.26-9.725a4711.566 4711.566 0 0 0-30.686-19.319l1.813 1.042-5.099-1.962-6.354-2.348-12.97-4.661-26.15-9.186 2.891 0.817c-8.734-1.618-16.971-4.046-24.901-6.956a184.724 184.724 0 0 1-17.436-7.457l-2.888-1.454-1.477-0.777-0.77-0.415-0.934-0.522-0.803-0.448-1.041-0.781a27.581 27.581 0 0 1-2.073-1.717l-0.689-0.647-0.572-0.565a45.45 45.45 0 0 1-1.713-1.835 74.675 74.675 0 0 1-2.412-2.88 141.19 141.19 0 0 1-3.785-4.982 322.988 322.988 0 0 1-6.561-9.392l-3.113-4.673-0.783-1.198-0.103-0.159-0.058-0.09-0.497-0.834-0.185-0.315-0.366-0.628-1.433-2.494a477.232 477.232 0 0 1-5.409-9.813c-6.965-12.972-13.425-25.85-19.8-38.784a3041.978 3041.978 0 0 1-18.767-38.822 4251.901 4251.901 0 0 1-18.262-39.025l-0.329-0.714-0.451-1.293c-10.718-30.718-25.767-60.175-43.55-87.991-8.904-13.908-18.552-27.387-28.749-40.418a510.183 510.183 0 0 0-15.763-19.13c-5.394-6.222-10.951-12.327-16.564-18.089a237.071 237.071 0 0 0-4.137-4.161l-0.479-0.464-0.174-0.167-0.938-0.935-1.07-1.094-2.151-2.179a421.657 421.657 0 0 0-8.775-8.556 426.803 426.803 0 0 0-18.311-16.35 462.859 462.859 0 0 0-39.282-29.649c-13.623-9.193-27.762-17.654-42.237-25.385a428.318 428.318 0 0 0-21.965-10.921 355.173 355.173 0 0 0-11.096-4.895 280.865 280.865 0 0 0-5.51-2.248l-2.696-1.043-2.321-0.854-1.602-0.589-1.141-0.542c0.128 0.061-0.273-0.123-0.867-0.315-0.6-0.199-1.397-0.437-2.285-0.67-1.788-0.47-3.918-0.927-6.153-1.336-4.492-0.824-9.416-1.488-14.417-2.042-5.013-0.554-10.144-1-15.306-1.367a487.998 487.998 0 0 0-7.76-0.488l-3.872-0.197-3.717-0.153 4.103-0.213a57.63 57.63 0 0 1-14.882 0.068 58.294 58.294 0 0 1-14.205-3.656 63.292 63.292 0 0 1-12.314-6.551 65.272 65.272 0 0 1-5.452-4.152 61.834 61.834 0 0 1-2.643-2.375 54.994 54.994 0 0 1-1.367-1.348l-0.745-0.777-0.424-0.458-0.691-0.78 1.577 1.677c-0.912-0.898-2.343-2.11-3.967-3.333a96.797 96.797 0 0 0-5.423-3.783c-3.905-2.546-8.213-5.063-12.66-7.494a326.714 326.714 0 0 0-13.75-7.069 442.732 442.732 0 0 0-7.063-3.357l-3.54-1.619-3.37-1.493-1.504-0.667-0.861-0.483c-5.319-2.986-10.655-5.451-15.524-7.014-2.421-0.779-4.725-1.333-6.681-1.615-1.921-0.298-3.62-0.271-4.124-0.196-0.106 0.011-0.14 0.02 0.048-0.032 0.097-0.029 0.242-0.071 0.536-0.176l0.614-0.241 0.584-0.26 0.548-0.267c-0.328 0.178 1.344-0.706 0.038-0.019-0.035 0.01 0.268-0.148 0.821-0.66 0.533-0.495 1.26-1.393 1.739-2.366 0.495-0.972 0.723-1.918 0.781-2.421 0.085-1.068-0.121-0.361 0.274 1.077 0.352 1.442 1.124 3.527 2.198 5.73 1.071 2.213 2.436 4.592 3.941 6.896a65.634 65.634 0 0 0 2.25 3.235l0.187 0.249-0.659-0.788 0.144 0.167 0.283 0.331 1.074 1.273 1.979 2.417c2.534 3.145 4.859 6.155 7.167 9.173a887.454 887.454 0 0 1 6.775 9.01 2014.012 2014.012 0 0 1 13.186 17.973l6.505 9.001 3.242 4.514 1.842 2.583a81.718 81.718 0 0 1 2.108 3.201c2.602 4.167 4.624 8.053 6.483 11.878 1.847 3.819 3.479 7.561 5.015 11.273 3.059 7.418 5.716 14.726 8.198 22.028a554.95 554.95 0 0 1 6.911 21.91l1.59 5.524 0.78 2.801 0.396 1.455 0.284 1.104 0.07 0.304 0.14 0.609a223.397 223.397 0 0 0 2.475 9.694 229.28 229.28 0 0 0 14.121 37.519c2.898 6.03 6.036 11.946 9.433 17.642a186.91 186.91 0 0 0 5.262 8.338 148.27 148.27 0 0 0 2.732 3.944l1.357 1.853 1.079 1.417-3.229-3.07c4.337 3.42 8.48 7.244 12.317 11.609a78.218 78.218 0 0 1 5.519 7.034 66.522 66.522 0 0 1 2.584 4.026c0.425 0.718 0.848 1.465 1.28 2.279l0.67 1.307 0.368 0.764 0.211 0.458 0.358 0.817-3.35-5.444c2.794 3.354 4.084 6.414 4.918 8.839a32.269 32.269 0 0 1 1.391 6.154c0.428 3.453 0.355 6.013 0.234 8.386-0.293 4.665-0.969 8.406-1.705 12.02-1.509 7.136-3.397 13.494-5.405 19.747a369.235 369.235 0 0 1-6.459 18.215 489.651 489.651 0 0 1-3.497 8.877l-1.815 4.418-1.919 4.527 0.744-2.117c-4.56 14.689-7.125 30.253-8.033 46.109-0.892 15.863-0.118 32.027 2.004 48.073a271 271 0 0 0 4.267 23.879c0.889 3.917 1.852 7.842 2.91 11.555l0.718 2.438 0.959 2.831c0.65 1.877 1.325 3.731 2.024 5.559 2.788 7.271 6.05 14.262 9.745 19.728 1.812 2.7 3.798 4.984 5.32 6.243 0.739 0.629 1.344 0.972 1.437 1.051 0.04 0.045-0.048 0.026-0.387 0.014a6.987 6.987 0 0 0-0.772 0.022 8.698 8.698 0 0 0-1.274 0.206l-0.432 0.108-0.32 0.091c-0.167 0.054-0.174 0.043-0.818 0.27l-9.974 12.609 8.08-57.157c1.874-10.57 5.116-20.777 9.455-30.396a133.137 133.137 0 0 1 7.346-13.998 122.717 122.717 0 0 1 4.347-6.664 106.737 106.737 0 0 1 2.384-3.274l1.279-1.646 0.684-0.847 0.844-1.008 0.429-0.512 0.247-0.23c1.264-1.178 2.624-2.605 3.969-4.099a144.07 144.07 0 0 0 4.036-4.7 222.467 222.467 0 0 0 3.972-4.966 246.029 246.029 0 0 0 3.814-5.04l12.996-17.662 6.755 20.016a970.96 970.96 0 0 0 11.453 32.043 857.305 857.305 0 0 0 12.556 31.637c8.829 20.905 18.418 41.513 29.092 61.574 5.354 10.02 10.92 19.935 16.806 29.667a525.828 525.828 0 0 0 18.605 28.619 398.964 398.964 0 0 0 20.746 27.179 289.798 289.798 0 0 0 11.381 12.808c3.939 4.137 7.977 8.208 12.382 11.887z">
</path>
</symbol>
<symbol id="icon-java" viewBox="0 0 1024 1024">
<path
d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288"
fill="#FF0000"></path>
<path
d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12"
fill="#FF0000"></path>
<path
d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152"
fill="#6699FF"></path>
<path
d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816"
fill="#6699FF"></path>
<path
d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648"
fill="#6699FF"></path>
</symbol>
</svg>
10.在script中动态添加标签
var container = document.getElementById('container')
var programs = [//定义programs的json数组
{ icon: 'home', title: '首页' },
{ icon: 'javascript', title: 'JS' },
{ icon: 'node.js', title: 'Node.js' },
{ icon: 'mysql', title: 'MySql' },
{ icon: 'java', title: 'Java' }
]
for (var i = 0; i < programs.length; i++) {
var a = document.createElement('a')//通过js动态创建a标签
a.innerHTML = '<svg><use xlink: href="#icon-' + programs[i].icon + '"></use></svg><label>' + programs[i].title + '</label>' //创建的a标签的显示文本为programs数组
container.appendChild(a)///创建的a标签添加到container中
}
11.添加鼠标点击事件和显示信息
var select = container.children[0]//设置默认选中项为第一个子元素
select.classList.add('click')
var result = document.getElementById('result')//显示第一个子元素的信息
result.innerHTML = '你选的是：' + select.innerHTML
container.onclick = function (e) {
var target = e.target
if (target.tagName == 'use') {
target = target.parentNode
target = target.parentNode
} else if (target.tagName == 'svg') {
target = target.parentNode
} else if (target.tagName == 'LABEL') {
target = target.parentNode
} else if (target.tagName == 'A') {
target = target
}
if (!target.className) {
target.classList.add('click')
result.innerHTML = '你选的是：' + target.innerHTML
if (select) select.classList.remove('click')//前一个选中项移除click样式
select = target
}
}
12.添加样式
<style>
#container {
width: 800px;
margin: 0 auto;
background: linear-gradient(#eee, #bbb);
}
a {
display: inline-block;
width: auto;
line-height: 30px;
padding: 5px 10px;
user-select: none;
cursor: pointer;
}
a>svg {
width: 24px;
height: 24px;
vertical-align: -6px;
/*向上偏移6像素*/
cursor: pointer;
}
a>label {
line-height: 24px;
cursor: pointer;
}
.click {
background-color: #999;
color: #eee;
}
</style>
13.在vscode中09文件夹点右键，选在终端中打开，输入node server
14.在浏览器中打开http://127.0.0.1:8080，最终效果
