我喜歡在我的專案中使用它，因為它讓我可以使用css和js（道具）inline svg很好地控制寬度、高度、填充顏色、筆觸寬度和筆觸顏色等內容。我通常為每個 SVG 圖示創建一個 vue.js SFC（單檔案組件）。這是一個例子：
<!-- IconsArrowRight.vue -->
<template>
<svg
viewBox="0 0 14 14"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.57026 0.888947L5.98842 2.46006L9.4199 5.89117L0.333374 5.89117L0.333374 8.10895H9.4199L5.98842 11.5401L7.57026 13.1112L13.6681 7.00006L7.57026 0.888947Z"
/>
</svg>
</template>
然后我會像這樣使用它（我使用 tailwindCSS 進行樣式設定）：
<template>
<div>
<IconsArrowRight class="w-8 h-8 text-blue-500" />
</div>
</template>
我在專案中使用了 50 多個圖示，并且為每個圖示創建了一個 vue.js 組件；僅僅為了圖示而擁有如此多的組件對于生產性能是一種不好的做法嗎？我應該改用字體圖示還是其他任何替代方法？
uj5u.com熱心網友回復：
對一個檔案使用一個.vue檔案.svg是完全沒問題的 IMO。它不會對性能產生任何重大影響，只是在構建您的應用程式時可能需要更長的時間，但沒有那么重要的 IMO。此外，在一些關于 HTML 規范的罕見情況下
，以這種方式使用它可以具有相當大的靈活性。
現在，關于有史以來最好的方法，我可能會說使用@unocss/preset-icons或任何基于Iconify的包，因為它會即時為您帶來所有可用和可以想象的圖示，沒有缺點和很多靈活性 不錯的 DX。
這是一篇分為 4 部分的文章，將解釋這種方法背后的所有原因以及如何將它普遍集成到任何解決方案中（即使不使用 Antfu 的解決方案）。
uj5u.com熱心網友回復：
很可能要么使用 svg 作為組件或作為性能方面的字體圖示，我根本不會考慮任何問題。Vue.js 是一個可用于大型應用程式的框架，您的組件一點也不重，它們只是使用 SVG。
我個人的偏好是用作您提到的字體圖示，并使用您將作為道具傳遞給字體圖示的組件，因此通過這種方式，您將擁有所有 svg 的 1 個組件。
關于樣式，再次使用道具傳遞所有樣式并將該道具與:class
我想這樣會干凈得多，
干杯
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457843.html
上一篇：在Capybara中找到一個按鈕