SVG → Vue
ห่อ SVG ใด ๆ ให้เป็นคอมโพเนนต์ไฟล์เดียว .vue — หรือหยิบเฉพาะบล็อกเทมเพลตไปใส่ในคอมโพเนนต์ที่คุณมีอยู่แล้ว
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ชื่อคอมโพเนนต์มาจากชื่อไฟล์ บล็อก script มีไว้ตั้งชื่อคอมโพเนนต์เท่านั้น — ลบทิ้งได้ถ้าคุณไม่ต้องใช้
เฉพาะส่วนมาร์กอัป สำหรับวางลงในคอมโพเนนต์ที่คุณมีอยู่แล้ว หากไฟล์ SVG มีอิลิเมนต์ style ฝังอยู่ CSS ของมันจะอยู่ในบล็อก style ของไฟล์ด้านบน ไม่ใช่ตรงนี้
ไม่ต้องเปลี่ยนชื่ออะไรเลย
เทมเพลตของ Vue ถูกแยกวิเคราะห์แบบ HTML ดังนั้น SVG จึงใส่เข้าไปได้ตรงตามที่เขียนมาเลย stroke-width ก็ยังเป็น stroke-width, class ก็ยังเป็น class และแอตทริบิวต์ style แบบอินไลน์ก็ยังทำงานได้ การแปลงจึงแทบเป็นแค่การห่อไฟล์ — นั่นคือเหตุผลที่ผลลัพธ์หน้าตาใกล้เคียงกับต้นฉบับมาก
ที่เหลือเป็นหน้าที่ของการส่งต่อแอตทริบิวต์ เมื่อมีอิลิเมนต์รากเพียงตัวเดียว อะไรก็ตามที่คุณใส่ให้คอมโพเนนต์จะไปลงที่แท็ก svg ดังนั้น width, class หรือตัวจัดการคลิกจึงทำงานได้โดยไม่ต้องประกาศ prop สักตัว
สามขั้นตอน
เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ
ไฟล์ .vue ทั้งไฟล์ หรือเฉพาะเทมเพลต
import เหมือนคอมโพเนนต์อื่น แล้วกำหนดขนาดจากภายนอก
ตอบสั้น ๆ
เพราะคุณไม่จำเป็นต้องมี คอมโพเนนต์ที่มีรากเดียวจะส่งแอตทริบิวต์ใด ๆ ที่คุณให้ไปยังแท็ก svg โดยตรง ดังนั้น width, height, class และตัวรับฟังอีเวนต์จึงทำงานได้อยู่แล้ว ให้ประกาศ props ต่อเมื่อคุณต้องการนำค่านั้นไปคำนวณต่อ
มีไว้ตั้งชื่อคอมโพเนนต์เท่านั้น ซึ่งชื่อนี้จะโผล่ใน Vue devtools และในข้อความเตือน หากไม่มีบล็อกนี้ คอมโพเนนต์ก็แสดงผลเหมือนเดิมทุกประการ จึงลบทิ้งได้อย่างปลอดภัย
ย้ายไปอยู่ในบล็อก style แบบ scoped ที่ท้ายคอมโพเนนต์ Vue จะทิ้งแท็ก style และ script ที่พบภายในเทมเพลต ดังนั้นไฟล์ SVG ที่ส่งออกจาก Illustrator หรือ Figma — ซึ่งเกือบทุกครั้งจะพกสไตล์ชีตฝังมาด้วย — จะแสดงผลโดยสีหายไปทั้งหมด การย้าย CSS ออกมาทำให้มันยังทำงาน และ scoped ก็กันไม่ให้มันรั่วไปกระทบส่วนอื่นของแอปคุณ
แทนค่า fill หรือ stroke ที่เขียนตายตัวด้วย currentColor แล้วกำหนดสีผ่าน CSS ที่อิลิเมนต์แม่ ตัวเปลี่ยนสี SVG สามารถเปลี่ยนทุกสีในไฟล์ให้เป็น currentColor ก่อนที่คุณจะแปลงได้
สำหรับผลลัพธ์ชุดนี้ ใช่ — script setup และ defineOptions เป็นความสามารถของ Vue 3 ส่วนบน Vue 2 บล็อกเทมเพลตยังใช้ได้อยู่ เพียงวางลงใน template ของคอมโพเนนต์แบบ options API ธรรมดา
ไม่ การแปลงเป็นเพียงงานจัดการสตริงธรรมดาที่ทำในเบราว์เซอร์ของคุณ