تبدیل آیکون های فونت به SVG

اگر در حال خواندن این مقاله هستید، احتمالاً می توانم فرض کنم که قبلاً تصمیم گرفته اید از استفاده از فونت های نماد به یک سیستم نماد SVG تغییر دهید. یا شاید شما در حال بررسی این ایده هستید و می خواهید یک ایده کلی از اینکه چگونه پیش می رود و اینکه آیا ارزش آن را دارد یا خیر به دست آورید. در هر صورت، این پست اینجا برای کمک به شما در این زمینه است.

اگر هنوز متقاعد نشده اید که چرا SVG یک سیستم آیکون بهتر است، من به شدت توصیه می کنم این مقاله را بخوانید – مقایسه ای بین فونت های نماد و SVG بومی برای سیستم های آیکون. بسیاری از شرکت‌ها و سازمان‌ها، از جمله Github، قبلاً به SVG روی آورده‌اند و مقاله‌های خوبی نوشته‌اند و توضیح می‌دهند که چرا SVG را جایگزین بهتری می‌دانند. در پایان این پست چند مقاله را برای مطالعه بیشتر فهرست کرده ام.

سوئیچ را درست کنید

1. فایل های فونت آیکون خود را دریافت کنید.

آیکون های فونت ها حروف فونت هستند. آنها بخشی از یک فونت وب هستند و بنابراین در فایل ها و فرمت های فونت وب تعریف می شوند.

من معمولاً از فونت‌های آیکون استفاده نمی‌کنم، بنابراین برای یک نسخه آزمایشی به Fontello.com – یک تولیدکننده فونت آیکون آنلاین – مراجعه کردم تا فونت آیکونی ایجاد کنم که بتوانم با آن برای این پست وبلاگ کار کنم. من چند آیکون را انتخاب کردم، سپس یک فونت آیکون ایجاد کردم و آن را دانلود کردم.

Fontello یک پوشه حاوی یک صفحه نمایشی ایجاد می کند که به شما نشان می دهد چگونه نمادها را در صفحه خود نمایش دهید و از چه نام کلاس استفاده کنید.

در میان فایل های تولید شده، فونت واقعی مورد استفاده برای تعریف آیکون ها وجود دارد. فایل های فونت در a موجود هستند font پوشه

اینها فایل هایی هستند که برای ادامه نیاز دارید. ما از این فایل ها برای “استخراج” آیکون ها و تبدیل آنها به SVG استفاده خواهیم کرد.

2. ابزار خود را انتخاب کنید.

برای تبدیل آیکون ها به SVG می توانیم از یکی از ابزارهای زیر استفاده کنیم:

• fontello-svg: “یک ابزار خط فرمان برای تولید نسخه های SVG یک نماد Fontello با فایل CSS مربوطه.”
• فونت انفجار: “شما می توانید از font-blast برای استخراج آیکون ها از هر فونت آیکونی – Font Awesome، Foundation، هر چیزی از Fontello و غیره استفاده کنید.”
• اپلیکیشن آیکومون: یک برنامه وب برای تولید و ایجاد مجموعه آیکون در هر دو فرمت SVG و فونت نماد.

من مطمئن هستم که ممکن است ابزارهای بیشتری برای این کار وجود داشته باشد، اما اینها همانهایی هستند که من آنها را می شناسم.

استفاده خواهم کرد آیکومون و فونت انفجار در این مقاله زیرا آنها ابزارهای عمومی هستند که با هر فونتی قابل استفاده هستند و فقط به یک قلم محدود نمی شوند. هر دو fontello-svg و فونت انفجار تقریباً به همین روش استفاده می شوند و می توانید اطلاعات بیشتری در مورد آن بیابید fontello-svg در Readme در مخزن Github.

3. آیکون های فونت را به آیکون های SVG تبدیل کنید.

3.1. استفاده از Icomoon

برای تبدیل آیکون های فونت به آیکون های SVG با استفاده از Icomoon، ابتدا باید آنها را آپلود کنیم.

نمادهای فونت شما به صورت مجموعه ای از نمادها در برنامه در دسترس خواهند بود. مراحل زیر همان مراحلی هستند که اگر از مجموعه نمادهای موجود در صفحه انتخاب می‌کردید، انجام می‌دادید:

• نمادهایی را که می خواهید به عنوان SVG دانلود کنید انتخاب کنید.
• را کلیک کنید SVG و موارد دیگر تولید کنید دکمه

مانند Fontello، Icomoon پوشه ای حاوی آیکون هایی که شما تولید کرده اید را به همراه یک صفحه نمایشی تولید می کند که به شما نشان می دهد چگونه می توانید از آنها در صفحات خود استفاده کنید.

نمادهایی که به SVG تبدیل کردید در این قسمت موجود است SVG پوشه

برای هر نماد یک فایل SVG وجود دارد. کیت آماده است تا در صفحه شما جاسازی شود.

اما قبل از جاسازی آیکون ها، ممکن است بخواهید آنها را sprite کنید. یعنی یک SVG Sprite ایجاد کنید که شامل تمام آیکون ها باشد و سپس از آن اسپرایت برای نمایش هر آیکون به طور همزمان در جایی که نیاز است در صفحه استفاده کنید. Icomoon به راحتی یک sprite SVG تولید می کند (simbol-defs.svg) برای شما همراه با پلی فیل (svgxuse.js) برای مرورگرهای قدیمی که از مراجع sprite خارجی پشتیبانی نمی کنند.

3.2. استفاده از فونت انفجار

برای تبدیل آیکون های فونت به آیکون های SVG با استفاده از فونت انفجار ابتدا باید font-blast را با استفاده از npm از طریق ترمینال خود نصب کنید.

$ npm install font-blast -g

را -g پرچم (به اختصار از global) تضمین می کند که می توانید اسکریپت را در هر نقطه از رایانه خود بدون توجه به ریشه نصب اجرا کنید.

همانطور که در مستندات font-blast ذکر شد، “شما می توانید آیکون هایی را از خط فرمان با فراخوانی اسکریپت با دو پارامتر ایجاد کنید: فایل SVG فونت و دایرکتوری که آیکون های جداگانه باید در آن قرار گیرند”:

$ font-blast [svg-font-file] [destination-dir]

دستور من به این شکل بود:

font-blast /Users/Sara/Downloads/fontello-08cdd41f/font/fontello.svg  /Users/Sara/Downloads/fontello-08cdd41f/svg-icons

نکته: می‌توانید پوشه خود را به ترمینال بکشید، که به نوعی مسیر آن پوشه را در ترمینال می‌اندازد، بنابراین لازم نیست آن را به صورت دستی تایپ کنید یا آن را بگیرید و سپس آن را کپی و پیست کنید.

با اجرای دستور بالا، font-blast آیکون ها را از فایل های فونت استخراج می کند و برای هر کدام یک آیکون SVG ایجاد می کند و نتیجه را در پوشه ای که در خط فرمان مشخص کرده اید ذخیره می کند. ترمینال من به شکل زیر است:

را نمادهای svg پوشه ای که برای فایل های تولید شده انتخاب کردم به این صورت است:

همانطور که می توانید حدس بزنید، SVG پوشه حاوی نمادهای SVG تولید شده است:

پس از آن، آیکون ها آماده تعبیه در صفحه شما هستند.

4. Sprite، Embed، Style، Animate، از آن لذت ببرید!

وجود دارد سه روش های اساسی برای ایجاد و استفاده از sprites SVG. من یک مرور کلی از این تکنیک ها را اینجا نوشتم. ما هر یک از این تکنیک ها را با جزئیات بیشتری در مقاله (یا سری مقالات) آینده پوشش خواهیم داد، مزایا و معایب هر کدام و نحوه ایجاد و استفاده از SVG sprites را نشان خواهیم داد، پس با ما همراه باشید.

شما می توانید در فید RSS وبلاگ من مشترک شوید تا از مقالات جدید مطلع شوید. یک خبرنامه ایمیلی نیز در دست ساخت است!

مطالعه توصیه شده: