vite svg 2 webfont

VITE-SVG-2-WEBFONT

ปลั๊กอิน VITE ที่สร้างแบบอักษรจากไอคอน SVG ของคุณและช่วยให้คุณใช้ไอคอนใน HTML ของคุณ

vite-svg-2-webfont ใช้แพ็คเกจ webfonts-generator เพื่อสร้างแบบอักษรในรูปแบบใด ๆ นอกจากนี้ยังสร้างไฟล์ CSS เพื่อให้คุณสามารถใช้ไอคอนของคุณโดยตรงใน HTML ของคุณโดยใช้คลาส CSS

การติดตั้ง

NPM

 npm i -D vite-svg-2-webfont

เส้นด้าย

 yarn add -D vite-svg-2-webfont

PNPM

 pnpm add -D vite-svg-2-webfont

การใช้งาน

เพิ่มปลั๊กอินลงใน vite.config.ts ด้วยการตั้งค่าที่ต้องการและนำเข้าโมดูลเสมือนจริงเพื่อฉีดไอคอน CSS Font ไปยังมัด

Vite Config

เพิ่มปลั๊กอินลงในอาร์เรย์ปลั๊กอิน Vite Configs ของคุณ

 // vite.config.ts
import { resolve } from 'path' ;
import { defineConfig } from 'vite' ;
import viteSvgToWebfont from 'vite-svg-2-webfont' ;

export default defineConfig ( {
    plugins : [
        viteSvgToWebfont ( {
            context : resolve ( __dirname , 'icons' ) ,
        } ) ,
    ] ,
} ) ;

นำเข้าโมดูลเสมือนจริง

นำเข้าโมดูลเสมือนจริงลงในแอพ

 // main.ts
import 'virtual:vite-svg-2-webfont.css' ;

เพิ่มองค์ประกอบคลาสเป็น HTML เพื่อใช้แบบอักษร

ใช้แบบอักษรในเทมเพลตที่มีคลาสแบบอักษรไอคอนและชื่อคลาสไอคอน ชื่อคลาส FONT เริ่มต้นคือ .icon และสามารถเอาชนะได้โดยผ่านตัวเลือกการกำหนดค่า baseSelector ชื่อคลาสไอคอนมาจากชื่อไฟล์ .svg ของพวกเขาและนำหน้าด้วยค่าของ classPrefix ซึ่งเริ่มต้นเป็น icon- -

ในตัวอย่างด้านล่างคลาส add จะแสดงไอคอนที่สร้างจากไฟล์ {context}/add.svg

 < i class =" icon icon-add " > </ i > 

การกำหนดค่า

ปลั๊กอินมี API ที่ประกอบด้วยพารามิเตอร์ที่ต้องการเพียงหนึ่งตัวและพารามิเตอร์เสริมหลายตัวช่วยให้สามารถปรับแต่งปลั๊กอินได้อย่างสมบูรณ์

บริบท

• ที่จำเป็น
• ประเภท : string
• คำอธิบาย : เส้นทางที่แก้ไขได้เป็นไดเรกทอรีซึ่งรูปแบบ GLOB เพื่อค้นหาไฟล์ svg จะดำเนินการ ไฟล์ SVG จะถูกใช้เพื่อสร้างแบบอักษรไอคอน

ไฟล์

• ประเภท : string
• คำอธิบาย : อาร์เรย์ของ Globs ของไฟล์ SVG เพื่อเพิ่มลงในเว็บฟอนท์จากภายในบริบท
• ค่าเริ่มต้น ['*.svg']

ตัวอักษร

• ประเภท : string
• คำอธิบาย : ชื่อตัวอักษรและชื่อพื้นฐานของไฟล์ตัวอักษร
• 'iconfont' เริ่มต้น

ชะตากรรม

• ประเภท : string
• คำอธิบาย : ไดเรกทอรีสำหรับไฟล์ตัวอักษรที่สร้างขึ้น
• PATH.RESOLVE path.resolve(context, '..', 'artifacts')
• ดู Webfonts-Generator#dest

CSSDest

• ประเภท : string
• คำอธิบาย : พา ธ สำหรับไฟล์ CSS ที่สร้างขึ้น
• path.join path.join(dest, fontName + '.css')
• ดู WebFonts-Generator#CSSDest

csstemplate

• ประเภท : string

• คำอธิบาย : เส้นทางของเทมเพลต CSS ที่กำหนดเอง เครื่องกำเนิดไฟฟ้าใช้เทมเพลตแฮนด์บาร์ เทมเพลต THT ได้รับตัวเลือกจาก templateOptions พร้อมกับตัวเลือกต่อไปนี้:

  • ตัวอักษร
  • string SRC-ค่าของคุณสมบัติ src สำหรับ @font-face
  • object CodePoints - CodePoints ของไอคอนในรูปแบบ hex

• เส้นทางของเทมเพลตเริ่มต้นจะถูกเก็บไว้ในวัตถุ webfontsGenerator.templates

  • webfontsGenerator.templates.css - เส้นทางเทมเพลต CSS เริ่มต้น มันสร้างคลาสที่มีชื่อตามค่าจาก options.templateOptions
  • webfontsGenerator.templates.scss - เส้นทางเทมเพลต SCSS เริ่มต้น มันสร้าง Mixin webfont-icon เพื่อเพิ่มสไตล์ไอคอน ปลอดภัยที่จะใช้ไฟล์หลายไฟล์ที่สร้างขึ้นพร้อมกับ Mixins ด้วยกัน

• ดู webfonts-generator#csstemplate

CSScontext

• ดู webfonts-generator#csscontext

cssfontsurl

• ประเภท : string
• คำอธิบาย : เส้นทางฟอนต์ที่ใช้ในไฟล์ CSS
• cssDest เริ่มต้น

htmldest

• ประเภท : string
• คำอธิบาย : พา ธ สำหรับไฟล์ HTML ที่สร้างขึ้น
• path.join path.join(dest, fontName + '.html')
• ดู Webfonts-Generator#htmldest

htmltemplate

• ประเภท : string
• คำอธิบาย : เส้นทางแม่แบบ HTML เครื่องกำเนิดไฟฟ้าใช้เทมเพลตแฮนด์บาร์ เทมเพลตได้รับตัวเลือกจาก options.templateOptions พร้อมกับตัวเลือกต่อไปนี้:
  • ตัวอักษร
  • string สไตล์ - สไตล์ที่สร้างขึ้นด้วยเทมเพลต CSS เริ่มต้น ( cssFontsPath เปลี่ยนเป็นเส้นทางสัมพัทธ์จาก htmlDest เป็น dest )
  • ชื่อ string[] - ชื่อของไอคอน
• ดู webfonts-generator#htmltemplate

การมัด

• ประเภท : boolean
• คำอธิบาย : เปิดใช้งานหรือปิดการใช้งานฟังก์ชั่นการมัด
• เริ่มต้น true
• ดู Webfonts-Generator#ligatu

ทำให้เป็นปกติ

• ประเภท : boolean
• คำอธิบาย : ไอคอนปกติโดยการปรับขนาดให้สูงถึงความสูงของไอคอนสูงสุด
• ค่าเริ่ม false
• ดู SVGICONS2SVGFONT#OPTIONNORMALIZE

กลม

• ประเภท : number
• คำอธิบาย : การตั้งค่าการปัดเศษเส้นทาง SVG
• ค่าเริ่มต้น 10e12
• ดู SVGICONS2SVGFONT#OPTIONROUND

โคตร

• ประเภท : number
• คำอธิบาย : การสืบเชื้อสายตัวอักษร มันมีประโยชน์ในการแก้ไขพื้นฐานตัวอักษรด้วยตัวคุณเอง
• ค่าเริ่มต้น 0
• ดู SVGICONS2SVGFONT#OPTIONDESCEST

แก้ไขปัญหา

• ประเภท : boolean
• คำอธิบาย : สร้างแบบอักษร monospace ของความกว้างของไอคอนอินพุตที่ใหญ่ที่สุด
• ค่าเริ่ม false
• ดู SVGICONS2SVGFONT#OPTIONSFIXEDWIDTH

fontheight

• ประเภท : number
• คำอธิบาย : ความสูงของตัวอักษรที่ส่งออก (ค่าเริ่มต้นถึงความสูงของไอคอนอินพุตสูงสุด)
• ดู SVGICONS2SVGFONT#OPTIONTHONTHEight

เป็นศูนย์กลาง

• ประเภท : boolean
• คำอธิบาย : คำนวณขอบเขตของสัญลักษณ์และตรงกลางในแนวนอน
• ค่าเริ่ม false
• ดู SVGICONS2SVGFONT#OPTIONSCENTERHORIZONTALLY

generateFiles

• ประเภท : boolean | string | string[]
• คำอธิบาย : ตั้งค่าประเภทของไฟล์ที่จะบันทึกลงในระบบในระหว่างการพัฒนา
• อินพุตที่ถูกต้อง :
  • true สร้างไฟล์ทุกประเภท
  • false สร้างไฟล์ไม่มี
  • 'html' - สร้างไฟล์ html
  • 'css' - สร้างไฟล์ CSS
  • 'fonts' - สร้างไฟล์ตัวอักษร (ตามประเภทที่ร้องขอ)
• ค่าเริ่ม false

ประเภท

• ประเภท : string | string[]
• คำอธิบาย : ประเภทไฟล์ตัวอักษรที่จะสร้าง ค่าที่เป็นไปได้:
  • svg
  • ttf
  • woff
  • woff2
  • eot
• ค่าเริ่มต้น ['eot', 'woff', 'woff2', 'ttf', 'svg']
• ดู WebFonts-Generator#ประเภท

จุดตัด

• ประเภท : { [key: string]: number }
• คำอธิบาย : จุดรหัสเฉพาะสำหรับไอคอนบางอย่าง ไอคอนที่ไม่มีรหัสจุดจะเพิ่มจุดรหัสจาก startCodepoint ข้ามซ้ำ
• ดู WebFonts-Generator#codepoints

ชั้นเรียน

• ประเภท : string
• คำอธิบาย : คำนำหน้าคลาส CSS สำหรับไอคอนที่สร้างขึ้นแต่ละรายการ
• 'icon-' เริ่มต้น '
• ดู WebFonts-Generator#templateOptions

ฐาน

• ประเภท : string
• คำอธิบาย : ตัวเลือกฐาน CSS ซึ่งจะใช้แบบอักษร
• ค่าเริ่มต้น '.icon'
• ดู WebFonts-Generator#templateOptions

formatoptions

• ประเภท : { [format in 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot']?: unknown };
• คำอธิบาย : เฉพาะต่อรูปแบบตัวเลือกโดยพลการเพื่อส่งผ่านไปยังเครื่องกำเนิดไฟฟ้า รูปแบบและเครื่องกำเนิดไฟฟ้าที่ตรงกัน:
  • SVG - SVGICONS2SVGFONT
  • TTF - SVG2TTF
  • WOFF2 - TTF2WOFF2
  • WOFF - TTF2WOFF
  • EOT - TTF2EOT
• ดู webfonts-generator#formatoptions

moduleid

• ประเภท : string
• คำอธิบาย : รหัสโมดูลเสมือนซึ่งใช้โดย Vite เพื่อนำเข้าสิ่งประดิษฐ์ปลั๊กอิน เช่นค่าเริ่มต้นคือ "vite-svg-2-webfont.css" ดังนั้น "เสมือน: VITE-SVG-2-WEBFONT.CSS" ควรนำเข้า
• ค่าเริ่มต้น 'vite-svg-2-webfont.css'

แบบอินไลน์

• ประเภท : boolean
• คำอธิบาย : สินทรัพย์แบบอักษรแบบอินไลน์ใน CSS โดยใช้การเข้ารหัส BASE64
• ค่าเริ่ม false

allowwritefilesinbuild

• ประเภท : boolean
• คำอธิบาย : อนุญาตให้เอาท์พุทสินทรัพย์ (HTML, CSS และแบบอักษร) ระหว่างการสร้าง ดู
• ค่าเริ่ม false

API สาธารณะ

ปลั๊กอินจะเปิดเผย API สาธารณะที่สามารถใช้ภายในปลั๊กอินอื่นโดยใช้กลไกการสื่อสารระหว่างการโรลอัพ

วิธีการที่มีอยู่ในปัจจุบัน:

getGeneratedWebfonts

• returns : Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>
• คำอธิบาย
  • type - รูปแบบตัวอักษรที่สร้างขึ้นโดยปลั๊กอิน
  • href - เส้นทางไปสู่ตัวอักษรที่สร้างขึ้น
• repo นี้มีตัวอย่างการใช้งาน