Svg

2024年08月27日

柏拉文

越努力，越幸运

一、认识

---

二、React

---

引用语法如下: 注意需要将 fill=xxx 改为 fill=currentColor, 它会使得 SVG 元素的填充颜色与当前元素的文本颜色一致。这意味着你可以用 CSS 控制 SVG 图标的颜色，使其与周围文本的颜色匹配。这样，如果你更改了文本的颜色，SVG 图标的颜色也会相应改变。

const SvgIcon = (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M7.2 4H8.8V5.6H7.2V4ZM7.2 7.2H8.8V12H7.2V7.2ZM8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4Z"
            fill="currentColor"
        />
    </svg>
);

function App(){
    return <div>
        { SvgIcon }
    </div>
}

三、Vue3.0

---