Шрифт Azure Icon для вашего веб-приложения

Как для  веб-сайта, так и для приложения Cloud Portam , когда речь идет о значках, мы не используем изображения. Почти всегда мы используем векторные иконки и шрифты (например, Font Awesome, который, кстати, очень удачно назван; они действительно очень классные :)).

Там, где Font Awesome не работал, были значки для вещей, специфичных для Azure. В прошлом нам помогал Джигар Патель , который работает с моим хорошим другом Динешем Агарвалом (который, кстати, управляет потрясающим стартапом под названием Pro Start Me … не забудьте!). Но, учитывая, что Azure добавляет новую услугу почти каждый месяц, я чувствовал себя немного неловко, когда отправлялся в Джигар и Динеш, чтобы попросить новые иконки (не то, чтобы они сказали «нет» … но я вспомнил эту историю: научить человека ловить рыбу :)). Так что на этот раз я подумал, что попробую сам!

Иконки живы и работают на сайте Cloud Portam по адресу http://cloudportam.com/azure-icon-font . Проверь их!

В этом блоге рассказывается о том, как я создал эти иконки. Для такого творчески сложного человека, как я, чей любимый цвет — синий или серый :), это был незабываемый опыт!

Шаг 1: Загрузите файлы Visio

Начну с того, что я не создавал эти иконки с нуля! Команда по контенту из Microsoft уже проделала замечательную работу по созданию диаграмм архитектуры Azure, которые вы можете загрузить и использовать в своих собственных презентациях, чертежах и так далее. Вы можете скачать их здесь: https://azure.microsoft.com/en-us/documentation/articles/architecture-overview/#symbol-and-icon-sets (прямая ссылка для скачивания: http://aka.ms/ CnESymbols ). Скачайте zip-файл и распакуйте его. После того, как вы извлекли файлы, вам нужно перейти в папки «CnE_VisioStencils» и открыть файл «CnE_CloudV2.22.vss» в Visio. Вот где происходит волшебство :).

Шаг 2. Создание файлов SVG

Следующим шагом является создание файлов SVG (Scalable Vector Graphics) для этих символов. Теперь вы можете сделать это как трудным, так и легким путем :).

Шаг 2.1: Создание файлов SVG — трудный путь

Visio имеет эту функцию, где вы можете экспортировать каждый элемент в трафарете в формат SVG вручную (например, «Трудный путь»). Чтобы преобразовать элемент в трафарете в формат SVG, выберите этот элемент, затем щелкните правой кнопкой мыши пункт «Редактировать мастер» контекстного меню «Редактировать мастер фигуру».

Даже если вы не видите ничего на следующем экране, просто сохраните его как файл SVG с помощью «Файл», а затем «Сохранить как».

Как только файл будет сохранен как файл SVG, вы сможете загрузить этот файл в браузер и посмотреть, как он выглядит!

Довольно просто, да!

Но есть около 100 или около того форм, и их преобразование займет много времени! На самом деле, так я и начал, но после того, как я преобразовал около 5 или 10 форм, я подумал, что должен быть лучший способ сделать что-то. Вот тогда я понял легкий путь.

Шаг 2.2. Создание файлов SVG — легкий путь

Какой простой способ для программистов, как мы, решить проблему? Напишите код, очевидно :). Поэтому я подумал, что должен быть способ создать эти файлы программно. Немного поиска привело меня к нескольким вопросам о переполнении стека и документации MSDN, и на этом основании я написал консольное приложение, которое принимает форму и экспортирует ее в формат SVG. Теперь это просто! Вот код, который я использовал:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Office.Interop.Visio;
namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            Application app = new Application();
            app.Visible = false;
            var doc = app.Documents.Add("D:\\CnE_CloudV2.22.vss");
            foreach (var item in doc.Masters)
            {
                var masterItem = (Master) item;
                var fileName = @"D:\Azure Icons SVG\" + masterItem.Name.Trim().Replace("\r", "").Replace("\n", "") + ".svg";
                if (File.Exists(fileName))
                {
                    File.Delete(fileName);
                }
                var shapes = masterItem.Shapes;
                foreach (var item2 in shapes  )
                {
                    var shape = (Shape) item2;
                    shape.Export(fileName);
                }
            }
            Console.WriteLine("Done....");
            Console.ReadLine();
        }
    }
}