1、将svg以字符串拿过来(注意:要将它自身的stroke去掉)
const usedIconSvg = `<svg width="20.041748" height="20.041664" viewBox="0 0 20.0417 20.0417" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc> Created with Pixso. </desc> <defs> <clipPath id="clip148_1857"> <rect id="keyline" width="20.041666" height="20.041666" fill="white"/> </clipPath> </defs> <g clip-path="url(#clip148_1857)"> <path id="椭圆 4" d="M10 2.99997C13.866 2.99997 17 6.13397 17 9.99997C17 13.866 13.866 17 10 17C6.13403 17 3 13.866 3 9.99997C3 6.13397 6.13403 2.99997 10 2.99997Z" /> <mask id="mask148_1867" mask-type="alpha" maskUnits="userSpaceOnUse" x="7.671875" y="3.000031" width="9.327881" height="9.139648"> <path id="椭圆 4" d="M8.24976 9.12498C8.24976 5.25899 6.13379 3.00003 9.99976 3.00003C13.8657 3.00003 16.9998 6.13403 16.9998 10C16.9998 13.866 13.8657 11.3125 9.99976 11.3125C6.13379 11.3125 8.24976 12.991 8.24976 9.12498Z" fill-rule="evenodd" fill="#3471FF"/> </mask> <g mask="url(#mask148_1867)"> <path id="矩形 636" d="M13.9377 2.56235L16.1252 5.62485L10.0002 10.4373L10.0002 2.12485L13.9377 2.56235Z" /> </g> </g> </svg> `;
2、span用v-html渲染出来
<span class="btn-icon" v-html="usedIconSvg" ></span>
3、鼠标移入改变颜色
.btn-icon { width: 20px; height: 20px; stroke: #4f5969; &:hover { stroke: #719cff; } }
标签:鼠标,svg,边框,stroke,移入,20px From: https://www.cnblogs.com/hwy6/p/17543400.html