鼠标移入svg改变svg的边框颜色
新方法！！！！更好用
fill="currentColor" // 将fill改成currentColor 然后通过color修改，就可以改变icon的颜色了
svg.ts文件
const storageSvg=`<svg width="20.041626" height="20.041664" viewBox="0 0 20.0416 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="clip135_960"> <rect id="keyline" width="20.041666" height="20.041666" fill="white"/> </clipPath> </defs> <g clip-path="url(#clip135_960)"> <path id="矩形 619 (边框)" d="M15.3491 2.38685C15.2354 2.36229 15.119 2.35001 15 2.35001L5 2.35001C4.88098 2.35001 4.76465 2.36229 4.65088 2.38685C4.55103 2.40842 4.45325 2.43945 4.35754 2.47993C4.26245 2.52014 4.17273 2.56828 4.08813 2.62434C3.99707 2.68478 3.91211 2.75442 3.83325 2.83328C3.75439 2.91214 3.68469 2.99712 3.62427 3.0882C3.56824 3.17272 3.52014 3.2625 3.47986 3.35755C3.43945 3.45329 3.40833 3.55108 3.38684 3.65091C3.3623 3.76462 3.34998 3.88099 3.34998 4.00001L3.34998 15C3.34998 15.119 3.3623 15.2354 3.38684 15.3491C3.40833 15.4489 3.43945 15.5467 3.47986 15.6425C3.52014 15.7375 3.56824 15.8273 3.62427 15.9118C3.68469 16.0029 3.75439 16.0879 3.83325 16.1667C3.91211 16.2456 3.99707 16.3152 4.08813 16.3757C4.17273 16.4317 4.26245 16.4799 4.35754 16.5201C4.45325 16.5606 4.55103 16.5916 4.65088 16.6132C4.76453 16.6377 4.88098 16.65 5 16.65L15 16.65C15.119 16.65 15.2354 16.6377 15.3491 16.6132C15.449 16.5916 15.5468 16.5606 15.6425 16.5201C15.7374 16.4799 15.8273 16.4317 15.9117 16.3757C16.0028 16.3152 16.0879 16.2456 16.1667 16.1667C16.2456 16.0879 16.3152 16.0029 16.3756 15.9118C16.4318 15.8273 16.4799 15.7375 16.52 15.6425C16.5605 15.5467 16.5916 15.449 16.6132 15.3492C16.6377 15.2354 16.65 15.119 16.65 15L16.65 4.00001C16.65 3.88097 16.6377 3.76459 16.6132 3.65086C16.5916 3.55105 16.5605 3.45328 16.52 3.35755C16.4799 3.26251 16.4318 3.17273 16.3756 3.08821C16.3152 2.99712 16.2456 2.91214 16.1667 2.83328C16.0879 2.75442 16.0028 2.68477 15.9117 2.62434C15.8273 2.56827 15.7374 2.52013 15.6425 2.47993C15.5466 2.43945 15.4489 2.40842 15.3491 2.38685ZM5 3.65001L15 3.65001C15.0483 3.65001 15.0931 3.65855 15.1343 3.67563C15.1755 3.69272 15.2133 3.71835 15.2474 3.75252C15.2816 3.78669 15.3073 3.8244 15.3243 3.86565C15.3414 3.9069 15.35 3.95168 15.35 4.00001L15.35 15C15.35 15.0483 15.3414 15.0931 15.3243 15.1344C15.3073 15.1756 15.2816 15.2133 15.2474 15.2475C15.2133 15.2817 15.1755 15.3073 15.1343 15.3244C15.0931 15.3415 15.0483 15.35 15 15.35L5 15.35C4.95166 15.35 4.90686 15.3415 4.8656 15.3244C4.82434 15.3073 4.78662 15.2817 4.75244 15.2475C4.71826 15.2133 4.69263 15.1756 4.67566 15.1344C4.65857 15.0931 4.65002 15.0483 4.65002 15L4.65002 4.00001C4.65002 3.95168 4.65857 3.9069 4.67566 3.86565C4.69275 3.8244 4.71826 3.78669 4.75244 3.75252C4.78662 3.71835 4.82434 3.69272 4.8656 3.67564C4.90686 3.65855 4.95166 3.65001 5 3.65001Z" fill-rule="evenodd" fill="currentColor"/> <rect id="矩形 837" x="4.000000" y="10.000000" width="12.000000" height="1.300000" fill="currentColor"/> <circle id="椭圆 95" r="1.000000" transform="matrix(1 0 0 1 10 13.5)" fill="currentColor"/> <circle id="椭圆 96" r="1.000000" transform="matrix(1 0 0 1 13 13.5)" fill="currentColor"/> </g> </svg> `
export {storageSvg}
<span
class="tag-icon" v-html="storageSvg">
</span>
import { storageSvg } from '@/assets/icons/svg';
.tag-icon{
color: rgb(79, 89, 105);
&:hover {
color: rgb(52, 113, 255);
}
}
1、将svg以字符串拿过来（注意：要将它自身的stroke去掉）
stroke-width="1.5" 设置线条宽度
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;
}
}
