用SVG图标替换WordPress文章列表默认图标

缘起

本站主题文章列表的默认“阅读量”、“点赞数”、“收藏数”和“评论数”图标不是很好看，于是我就想在主题中替换这些默认的图标样式。通过F12查看HTML中的图标定义，知道了它用的是SVG格式。因此大致学习了一下相关的内容，并进行了图标替换。本文简要记录一下相关操作。

关于SVG

SVG最大的特点是可以直接通过代码来绘制图像，更多关于SVG的介绍如下：

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

—— from 百度百科

常用SVG图标库

阿里巴巴矢量图标库： https://www.iconfont.cn/home/index

要使用这个里面的图标也比较简单，进入一个图标库，然后选中一个图标，点击下载按钮，就可以看到下面的弹框，点击下图中的“复制SVG代码”就可以把图标的SVG定义代码拷贝下来使用了：

SVG的基本用法

这里简单介绍一下SVG在网站中的使用，可以直接在“菜鸟教程”中试用，复制以下代码到菜鸟教程然后点击运行就可以看到效果：

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg t="1657032362854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7129" width="200" height="200"><path d="M504.32 817.152c-180.736 0-294.912-83.456-358.4-153.6-61.952-68.608-89.6-134.656-89.6-148.48 0-19.968 44.544-89.6 89.6-140.8 67.584-76.288 184.32-167.424 354.304-167.424 167.936 0 284.16 88.576 351.744 163.328 48.64 53.248 94.208 123.392 94.208 144.896 0 14.336-31.232 92.16-102.912 165.888-87.04 89.088-204.288 136.192-338.944 136.192z m-3.584-546.304c-145.92 0-246.784 78.848-305.664 145.408-38.912 43.52-61.44 82.432-69.12 96.768l-1.536 3.072 1.536 3.072c9.216 19.456 30.208 58.88 69.12 101.888 79.36 87.552 183.808 132.096 309.76 132.096 117.76 0 216.064-39.424 292.352-116.736 49.152-50.176 73.216-98.816 81.408-117.248l1.536-3.072-1.536-3.072c-8.192-14.848-31.744-54.784-73.728-100.864-59.904-64.512-160.256-141.312-304.128-141.312z" fill="#2C2C2C" p-id="7130"></path><path d="M541.184 606.208c-13.312 5.12-28.16 8.192-43.008 8.192-67.072 0-121.344-54.272-121.344-121.344s54.272-121.344 121.344-121.344S619.52 425.984 619.52 493.056c0 6.144-0.512 12.288-1.536 17.92h3.072c22.016 0 42.496 8.704 56.832 23.552 3.072-13.312 4.608-27.136 4.608-40.96 0-101.888-82.944-184.832-184.832-184.832-101.888 0-184.832 82.944-184.832 184.832 0 101.888 82.944 184.832 184.832 184.832 28.16 0 54.784-6.144 78.848-17.92-18.432-13.312-31.744-32.256-35.328-54.272z" fill="#2C2C2C" p-id="7131"></path><path d="M620.544 631.808c-22.016 0-39.936-17.92-39.936-39.936s17.92-40.448 39.936-40.448 39.936 17.92 39.936 40.448c0.512 21.504-17.408 39.936-39.936 39.936zM681.472 230.912s31.744-24.064 145.408 12.8c29.184 9.728 73.216 2.56 81.92-7.168 3.584 32.768-16.896 43.52-13.312 51.2 6.656 16.384 66.048 57.856 115.2 25.088 2.048 77.824-35.84 132.096-61.44 141.312-90.112-199.168-267.776-223.232-267.776-223.232z" fill="#2C2C2C" p-id="7132"></path></svg>

</body>
</html>

WordPress中的替换方法

第一步：F12查看图标的定义，例如，本站图标定义的关键字是“wi-eye”
第二步：进入后台，根据关键字找到icon定义的文件，我这里使用的命令grep -r "wi-eye" *，然后找到icon定义的文件在justnews/themer/assets/js/icons-2.6.18.js
第三步：用自己喜欢的SVG图标替换上面文件中的icon定义（可以下载到本地之后替换，然后再传回到服务器）

本站文章列表图标

<!DOCTYPE html>
<html>
<header>
</header>

<body>

阅读：
<svg t="1657032362854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7129" width="200" height="200"><path d="M504.32 817.152c-180.736 0-294.912-83.456-358.4-153.6-61.952-68.608-89.6-134.656-89.6-148.48 0-19.968 44.544-89.6 89.6-140.8 67.584-76.288 184.32-167.424 354.304-167.424 167.936 0 284.16 88.576 351.744 163.328 48.64 53.248 94.208 123.392 94.208 144.896 0 14.336-31.232 92.16-102.912 165.888-87.04 89.088-204.288 136.192-338.944 136.192z m-3.584-546.304c-145.92 0-246.784 78.848-305.664 145.408-38.912 43.52-61.44 82.432-69.12 96.768l-1.536 3.072 1.536 3.072c9.216 19.456 30.208 58.88 69.12 101.888 79.36 87.552 183.808 132.096 309.76 132.096 117.76 0 216.064-39.424 292.352-116.736 49.152-50.176 73.216-98.816 81.408-117.248l1.536-3.072-1.536-3.072c-8.192-14.848-31.744-54.784-73.728-100.864-59.904-64.512-160.256-141.312-304.128-141.312z" fill="#2C2C2C" p-id="7130"></path><path d="M541.184 606.208c-13.312 5.12-28.16 8.192-43.008 8.192-67.072 0-121.344-54.272-121.344-121.344s54.272-121.344 121.344-121.344S619.52 425.984 619.52 493.056c0 6.144-0.512 12.288-1.536 17.92h3.072c22.016 0 42.496 8.704 56.832 23.552 3.072-13.312 4.608-27.136 4.608-40.96 0-101.888-82.944-184.832-184.832-184.832-101.888 0-184.832 82.944-184.832 184.832 0 101.888 82.944 184.832 184.832 184.832 28.16 0 54.784-6.144 78.848-17.92-18.432-13.312-31.744-32.256-35.328-54.272z" fill="#2C2C2C" p-id="7131"></path><path d="M620.544 631.808c-22.016 0-39.936-17.92-39.936-39.936s17.92-40.448 39.936-40.448 39.936 17.92 39.936 40.448c0.512 21.504-17.408 39.936-39.936 39.936zM681.472 230.912s31.744-24.064 145.408 12.8c29.184 9.728 73.216 2.56 81.92-7.168 3.584 32.768-16.896 43.52-13.312 51.2 6.656 16.384 66.048 57.856 115.2 25.088 2.048 77.824-35.84 132.096-61.44 141.312-90.112-199.168-267.776-223.232-267.776-223.232z" fill="#2C2C2C" p-id="7132"></path></svg>

喜欢：
<svg t="1657032458526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7281" width="200" height="200"><path d="M858.112 218.624c-48.64-48.64-113.664-75.776-182.784-75.776-58.368 0-113.664 18.944-159.232 54.784l-4.096 3.072-4.096-3.072c-45.568-35.84-100.864-55.296-159.744-55.296-69.12 0-134.144 27.136-182.784 75.776-48.64 48.64-75.776 113.664-75.776 182.784 0 69.12 27.136 134.144 75.776 182.784l326.656 326.656c5.12 5.12 11.776 7.68 18.944 7.68 7.168 0 13.824-2.56 18.944-7.68l327.168-326.656c48.64-48.64 75.776-113.664 75.776-182.784 1.024-68.608-26.112-133.632-74.752-182.272z m-509.44-12.288C398.336 206.336 445.44 225.28 481.28 259.072c1.024 1.536 2.56 3.072 4.096 4.608 7.168 7.168 16.384 10.752 26.624 10.752 9.728 0 19.456-4.096 26.112-10.752l0.512-0.512c36.864-36.352 85.504-56.32 137.216-56.32 51.712 0 100.864 19.968 137.216 56.832 36.864 36.864 56.832 85.504 56.832 137.216 0 51.712-19.968 100.864-56.832 137.216L512 838.656l-300.544-300.544c-36.864-36.864-56.832-85.504-56.832-137.216 0-51.712 19.968-100.864 56.832-137.216 36.352-36.864 84.992-57.344 137.216-57.344z" fill="#2C2C2C" p-id="7282"></path><path d="M417.28 614.4c-7.168 0-13.824-3.072-18.944-7.68L261.632 470.016c-10.24-10.752-10.24-27.648 0.512-37.888 5.12-5.12 11.776-7.68 18.944-7.68 7.168 0 13.824 2.56 18.944 7.68L436.224 568.32c10.752 10.752 10.752 27.648 0 38.4-5.12 4.608-11.776 7.68-18.944 7.68z" fill="#2C2C2C" p-id="7283"></path></svg>

收藏：
<svg t="1657032549046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7426" width="200" height="200"><path d="M757.94318222 923.68213333c-10.79409778 0-22.21169778-3.63406222-33.93877333-10.79978666l-185.18471111-113.10648889c-6.57635555-4.00839111-16.35669333-6.30328889-26.81969778-6.30328889-10.47438222 0-20.25472 2.30741333-26.82652445 6.31466666l-185.17219555 113.09511112c-11.73276445 7.15889778-23.15605333 10.79978667-33.94446222 10.79978666-13.36433778 0-25.59772445-5.77877333-33.56103111-15.86176-6.78570667-8.59818667-13.60213333-24.15843555-7.56622222-49.47057778l50.34325333-211.04867555c3.75694222-15.72864-4.31217778-40.52764445-16.59676445-51.03047111L93.90990222 455.09176889c-27.56039111-23.60547555-23.85009778-46.74332445-20.97152-55.59182222 2.87744-8.85532445 13.47356445-29.75061333 49.63783111-32.65194667l216.29838222-17.34200889c16.10752-1.29934222 37.20078222-16.62634667 43.40508445-31.53351111l83.33198222-200.35356445c13.93436445-33.50755555 37.08017778-37.12568889 46.38833778-37.12568888s32.45397333 3.61813333 46.39402667 37.13137778l83.32629333 200.34218666c6.19292445 14.91854222 27.29187555 30.24554667 43.40622222 31.54488889l216.29155556 17.34200889c36.19271111 2.90133333 46.77176889 23.79662222 49.64352 32.64625778 2.87857778 8.85418667 6.58887111 31.99317333-20.97152 55.59751111L765.30688 596.25927111c-12.28003555 10.51420445-20.34346667 35.31320889-16.59107555 51.02933334l50.3546311 211.05550222c6.04728889 25.31783111-0.78051555 40.87808-7.57304888 49.46375111-7.95079111 10.09550222-20.18417778 15.87427555-33.55306667 15.87427555zM437.01475555 340.74396445c-14.80248889 35.60561778-54.95694222 64.78506667-93.39904 67.86616888l-194.64419555 15.60120889 148.29795555 127.02833778c29.27843555 25.09596445 44.61681778 72.30577778 35.67502223 109.80920889l-45.29948445 189.93265778 166.63096889-101.78787556c15.83900445-9.67111111 36.33834667-14.99477333 57.73084445-14.99477333s41.88956445 5.3248 57.72856888 14.99477333l166.63665778 101.78218667L691.06801778 661.04888889c-8.94862222-37.51480889 6.38976-84.72462222 35.66933333-109.79669334l148.29112889-127.04768-194.63964445-15.60576c-38.44096-3.08110222-78.59541333-32.26168889-93.4035911-67.86616888L512 160.45852445l-74.98524445 180.28544z" fill="#2C2C2C" p-id="7427"></path></svg>

评论：
<svg t="1657032613386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7570" width="200" height="200"><path d="M240.83692308 809.34837607c-17.95719658 0-36.13866667-14.11500854-36.13866667-41.09128205V646.29825641h-53.29176069c-28.89299146 0-52.39576069-23.50276923-52.39576067-52.39466667V185.96102564c0-28.89189744 23.50386325-52.39466667 52.39576067-52.39466667H717.20478633c28.89299146 0 52.39576069 23.50276923 52.39576068 52.39466667v407.9425641c0 28.89189744-23.50386325 52.39466667-52.39576068 52.39466667h-275.38598291c-5.82454701 0-17.28547008 4.55439316-21.51931624 8.54755556L270.21565812 796.51008547c-11.24649572 10.61524787-22.18119658 12.83829059-29.37873504 12.8382906z m-84.66926496-220.21141881h53.29176068c28.89189744 0 52.39466667 23.50276923 52.39466667 52.39466667v84.26119658l119.20847863-112.51418803c14.82064957-13.98700854 40.37470085-24.14823931 60.75842736-24.14823932h270.61825641V190.72765812H156.16765812v398.40820513z" fill="#2C2C2C" p-id="7571"></path><path d="M786.76348718 914.04362393c-10.05948718 0-20.35965812-4.29073505-29.2671453-12.49695726l-116.90666667-107.79241026c-4.3454359-4.01066667-16.03610256-8.576-21.95035897-8.576H497.00540171a28.58338462 28.58338462 0 1 1 0-57.16676923H618.64478633c20.27104274 0 45.80211966 9.97524787 60.70153846 23.71610256l86.46235897 79.71883761v-52.63097436c0-28.89189744 23.50386325-52.39466667 52.39576068-52.39466666h49.95829061V398.75719658H747.37558974a28.58338462 28.58338462 0 0 1 0-57.16786325h125.55377778c28.89299146 0 52.39576069 23.50386325 52.39576069 52.39576069v337.1968547c0 28.89189744-23.50386325 52.39466667-52.39576069 52.39466666h-49.9582906v89.27507693c0 17.85107692-8.31781197 32.15097436-22.25449572 38.25777777a34.40355556 34.40355556 0 0 1-13.95309402 2.93415385z" fill="#2C2C2C" p-id="7572"></path></svg>

</body>
</html>

发布者：CoolQA，转转请注明出处：https://www.amwalle.com/more/working/20220805-%e7%94%a8svg%e5%9b%be%e6%a0%87%e6%9b%bf%e6%8d%a2wordpress%e6%96%87%e7%ab%a0%e5%88%97%e8%a1%a8%e9%bb%98%e8%ae%a4%e5%9b%be%e6%a0%87.html