Question

我在组件vue.js中集成了新的svg图标，它们在docs和此处in the project中的显示方式有所不同。在我之前已经集成了类似的图标，它们可以，但是它们的代码看起来有所不同。看起来不错的图标：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 118.5 118.5" style="enable-background:new 0 0 118.5 118.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#D1D3D4;}
	.st1{fill:#FFFFFF;}
</style>
<title>ActionCenter</title>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="29.8007" y1="9.6862" x2="88.7393" y2="111.7738" gradientTransform="matrix(1 0 0 -1 0 120)">
	<stop  offset="0.27" style="stop-color:#E79D26"/>
	<stop  offset="0.72" style="stop-color:#E2B82C"/>
</linearGradient>
<circle class="st0" cx="59.3" cy="59.3" r="58.9"/>
<g class="cls-2"><polygon class="cls-3" points="84.15 51.78 82.47 49.57 72.05 49.57 70.07 51.78 84.15 51.78"/><polygon class="cls-3" points="91.34 49.57 93.02 51.78 102.25 51.78 103.99 49.57 91.34 49.57"/><polygon class="cls-3" points="111.17 51.78 119.13 51.78 119.13 49.57 112.91 49.57 111.17 51.78"/><polygon class="cls-3" points="62.95 49.57 -2.35 49.57 -2.35 51.78 60.98 51.78 62.95 49.57"/><path class="cls-3" d="M119.13,38.17l-1-2.82L108,48,99.3,59a4.34,4.34,0,0,0-1.76-.38,4.25,4.25,0,0,0-1.75.37L81.66,40.51A4.3,4.3,0,1,0,74,37.87a4.26,4.26,0,0,0,.47,2L44.18,73.62a4.41,4.41,0,0,0-1.92-.45,4.25,4.25,0,0,0-2.16.58L27.94,60.86a4.24,4.24,0,0,0,.62-2.21,4.31,4.31,0,0,0-8.61,0,4.35,4.35,0,0,0,.4,1.8L-.6,81.54.56,84.13,22.16,62.4a4.28,4.28,0,0,0,3.77.21L38.32,75.74A4.36,4.36,0,0,0,38,77.47a4.31,4.31,0,1,0,8.12-2L76.32,41.71a4.21,4.21,0,0,0,1.94.47A4.68,4.68,0,0,0,79.45,42l14.36,18.8A4.21,4.21,0,0,0,93.23,63a4.31,4.31,0,0,0,8.61,0,4.23,4.23,0,0,0-.57-2.12l15.88-20.15h0l2-2.52Z"/></g></svg>

新图标：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 118.53 118.53"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2,.cls-3{fill:none;stroke:#fff;stroke-miterlimit:10;}.cls-2{stroke-width:3.55px;}.cls-3{stroke-linecap:round;stroke-width:4.74px;}</style><linearGradient id="linear-gradient" x1="1.01" y1="59.27" x2="117.53" y2="59.27" gradientUnits="userSpaceOnUse"><stop offset="0.27" stop-color="#e79d26"/><stop offset="0.72" stop-color="#e2b82c"/></linearGradient></defs><title>ActionCenter</title><path class="cls-1" d="M117.53,59.27A58.26,58.26,0,1,1,59.27,1,58.26,58.26,0,0,1,117.53,59.27Z"/><circle class="cls-2" cx="59.27" cy="59.27" r="34.86"/><polyline class="cls-3" points="34.65 63.51 52.31 81.17 83.49 49.99"/></svg>

SVG图标在项目中的显示方式有所不同

0 个答案: