Mixin в Pug (ранее известном как Jade) - это мощный инструмент, который позволяет повторно использовать блоки кода на странице. Если вам нужно создать mixin для иконок в Pug, есть несколько подходов, которые вы можете использовать в зависимости от ваших потребностей.
Первый подход - это создание mixin, который принимает параметры и генерирует HTML-код иконки с помощью SVG. Например, вот простой пример mixin для создания иконок в Pug:
mixin icon(name, size = '16px', color = 'black')
svg(width=size, height=size, viewBox='0 0 24 24')
path(d=icons[name].path, fill=color)
В этом примере name - это имя иконки, size - размер иконки (по умолчанию 16 пикселей), а color - цвет иконки (по умолчанию черный). Предполагается, что у вас есть некоторый объект со списком иконок icons, где каждая иконка имеет свойство path, содержащее путь в формате SVG.
Чтобы использовать этот mixin, вы можете вызвать его следующим образом:
+icon('search', '24px', 'blue')
Это сгенерирует HTML-код иконки "search" с размером 24 пикселя и синим цветом.
Если вам нужно использовать иконку без изменения размера или цвета, вы можете вызвать mixin следующим образом:
+icon('home')
Второй подход - это создание отдельного mixin для каждой иконки. Это может быть полезно, если у вас есть разные иконки с различными путями или атрибутами. Например:
mixin searchIcon(size = '16px', color = 'black')
svg(width=size, height=size, viewBox='0 0 24 24')
path(d='M13 2C6.375 2 1 7.375 1 14c0 2.875 1.063 5.5 2.813 7.5l-3.28 3.282 1.407 1.407L7.22 22.093l3.282-3.282C12.5 20.938 15.125 22 18 22c6.625 0 12-5.375 12-12S24.625 2 18 2zm0 2c5.525 0 10 4.475 10 10s-4.475 10-10 10S3 19.525 3 14 7.475 4 13 4zm-3.219 2L5.78 10.563 5 11.343l.782.782L10.562 6l-.781-.782zm6.438 0l-.782.782 4.782 4.782.782-.782L16.219 6zM13 8.594l-.719.687L7.188 13H19V9h-5.187l-1.594-1.406L13 8.594z', fill=color)
mixin homeIcon(size = '16px', color = 'black')
svg(width=size, height=size, viewBox='0 0 24 24')
path(d='M22 12h-2V9h-3V7c0-1 .8-1.8 1.8-1.8h3.4c1 0 1.8 .8 1.8 1.8v5zm-4.2 2v4.1c0 2.2-1.8 4-4 4H10c-2.2 0-4-1.8-4-4V14H2l10-9l10 9l-2 2z', fill=color)
В этом примере у нас есть два отдельных mixin - searchIcon и homeIcon. Вы можете вызвать их, передавая параметры по аналогии с первым подходом:
+searchIcon('24px', 'blue')
+homeIcon('24px', 'green')
Один из преимуществ этого подхода - это большая гибкость и возможность настраивать каждую иконку по отдельности.
Таким образом, в зависимости от ваших потребностей, вы можете выбрать один из этих подходов или исследовать другие возможности, чтобы создать mixin для иконок в Pug.