Библиотека иконок UIkit 3 может быть увеличена и перезаписана с помощью ваших собственных файлов.
Дополнить коллекцию можно своими новыми иконками SVG.
Библиотека иконок UIkit 3 содержит иконки SVG, которые расположены в файле JavaScript uikit-icons.min.js
(или неминимизированная версия uikit-icons.js). Этот файл включает в себя все иконки,
никаких дополнительных файлов SVG не требуется. Ниже, в этом документе описывается, как вы можете добавить
свои собственные иконочные значки в библиотеку или перезаписать существующие.
Примечание Обратите внимание на компонент Иконки UIkit 3 для рассмотрения всех иконок по умолчанию.
Также доступен набор масштабируемых иконок asUIkit Material Icons 1000+.
Добавить, перезаписать
Добавить новые, перезаписать иконки UIkit 3
Вы можете перезаписать любую из иконок UIkit 3 по умолчанию и / или создать дополнительные.
Для начала, пожалуйста, подготовьте UIkit.
В результате структура должна получиться следующей:
...
/custom/.. <!-- созданный каталог пользовательской темы -->
/dist/..
...
/src/..
...
Теперь вы можете добавлять свои собственные иконки SVG и включать их в процесс сборки UIkit.
Чтобы найти дополнительные файлы иконок пакетный менеджер будет проверять две директори:
Пользовательская папка: /custom/icons/*.svg
Папка с настраиваемой, пользовательской темой:
/custom/mytheme/icons/*.svg
Скомпилируйте UIkit 3, чтобы дополнительные иконки были добавлены в сборку и / или перезаписаны. Используйте команду:
pnpm compile
Теперь ваши дополнительные иконки будут добавлены в библиотеку и расположены в одном из следующих мест:
dist/js/uikit-icons. js если вы добавили иконки в UIkit глобально
dist/js/uikit-icons-mytheme.js если иконки расположены внутри пользовательской темы
Результат
Имя новой иконки равно названию файла.
Конфликт имен
Избегайте конфликтов имен
Если будет добавлена иконка с существующим именем, то произойдёт перезапись иконки по умолчанию с тем же именем.
Например, если будет добавлена иконка с именем close.svg по пути /custom/icons/close.svg,
то она перезапишет значок закрытия по умолчанию.
Если добавляемая новая иконка использует имя которое раньше не использовалось, то такое имя будет добавлено в качестве новой иконки.
Например, добавив иконку example.svg по пути /custom/icons/example.svg будет создана новая иконка,
которую в дальнейшем можно будет использовать в проекте как <span uk-icon="icon: example"></span>.
Если icon это единственный параметр в значении атрибута, то можно использовать
<span uk-icon="example"></span> (подробнее).
Чтобы проверить, какие имена уже используются, посмотрите в двух каталогах
/src/images/components и /src/images/icons.
При создании новой иконки убедитесь, что её имя не используется ни в одной из этих двух папок. В противном случае иконка будет перезаписана.
Примечание Можно просто при создании / добавлении новых иконок использовать в названии файла префикс.
При добавлении пользовательского префикса (в названии файла) вопрос с случайной перезаписью иконки исчезает сам по себе.
К примеру , если будет добавлена иконка с именем
my_close.svg по пути /custom/icons/my_close.svg,
то она не перезапишет значок закрытия по умолчанию, а создаст новую иконку с именем my_close,
которую в дальнейшем можно будет использовать в проекте как <span uk-icon="my_close"></span>.
UIkit 3
Документация UIkit 3
css — Позиционирование иконки svg относительно текста HTML
В меню есть несколько svg. Проблема в том, что текст рядом с ними почему-то отображается немного ниже, хотя у общего для них дива задан display: flex, align-items: flex-start. Это не критично, конечно.
Но хотелось бы знать, в чем может быть причина. Посмотреть можно здесь: https://codepen.io/Enena/pen/BajPmdG.
.. Таблицы поддержки для HTML5, CSS3 и т. д. Могу ли я использовать Поиск ?
Значки SVG
— ЛС
Глобальное использование
73,89%
+
0,01%
«=»
73,9%
Значок, используемый браузерами для идентификации веб-страницы или сайта. Хотя все браузеры поддерживают .ico формат SVG может быть предпочтительнее, так как он легче поддерживает более высокое разрешение или более крупные значки.
Chrome
4–79: не поддерживается
80–113: поддерживается
114: поддерживается
115–117: поддерживается
900 13 Edge
12–79: не поддерживается
80–113: Поддерживается
00% — Supported»> 114: Поддерживается
Safari
3.1–16.4: Не поддерживается
16.5: Не поддерживается
16.6 — TP: не поддерживается
Firefox
2 — 3.6: не поддерживается
4 — 40: частичная поддержка
41 — 112: поддерживается
1 13: Поддерживается
114–115: Поддерживается
Opera
9–43: не поддерживается
44–53: поддерживается
54–66: не поддерживается
72% — Supported»> 67–98: поддерживается
99: поддерживается
900 32
IE
5,5–10: не поддерживается
11: не поддерживается
Chrome для Android
114: поддерживается
Safari на iOS
3.2–11.4: не поддерживается
12 — 16.4: Не поддерживается
16.5: Не поддерживается
16.6 — 17: Не поддерживается
Samsung Internet
4–12.0: Не поддерживается
13.0–20: Поддерживается
41% — Supported»> 21: Поддерживается
Opera Mini 9001 4
все: не поддерживается
Opera Mobile
10–12.1: не поддерживается
73: поддерживается
UC Browser для Android
13.4: не поддерживается
900 32
Браузер Android
2.1–4.4.4: не поддерживается
114: не поддерживается
Firefox для Android
113: не поддерживается
QQ Browser
13.1: не поддерживается
Baidu Браузер
13.18: поддерживается
Браузер KaiOS
10% — Supported»> 2.5: Поддерживается
3: Поддерживается
Поддержка Favicon — сложная тема. См. это руководство для получения дополнительной информации.
См. также иконки PNG.
Ресурсы:
Ошибка Chrome
Ошибка запроса функции WebKit
Ошибка Firefox, выделяет комментарий, подтверждающий примечание № 4 Иконки VG доступны и оптимизированы для SEO
Учитесь на знаниях сообщества. Эксперты добавляют свои идеи в эту совместную статью на основе ИИ, и вы тоже можете.
Это новый тип статьи, которую мы начали с помощью ИИ, и эксперты продвигают ее вперед, делясь своими мыслями непосредственно в каждом разделе.
Если вы хотите внести свой вклад, запросите приглашение, поставив лайк или ответив на эту статью. Узнать больше
— Команда LinkedIn
Последнее обновление:
1 июня 2023 г.
Масштабируемая векторная графика (SVG) — популярный способ создания значков для адаптивного веб-дизайна. Они могут адаптироваться к различным размерам экрана, разрешениям и цветам без потери качества или увеличения размера файла. Однако значки SVG также должны быть доступны и оптимизированы для SEO, чтобы пользователи и поисковые системы могли понять их значение и назначение. Вот несколько рекомендаций по обеспечению доступности и оптимизации SVG-иконок.
Используйте описательные заголовки и атрибуты alt
Один из самых простых и наиболее важных способов сделать ваши значки SVG доступными и оптимизированными для SEO — использовать описательные заголовки и атрибуты alt. Это текстовые значения, которые предоставляют имя и описание значка соответственно. Их можно добавить как атрибуты к элементу
Использование атрибутов и ролей ARIA
Еще один способ улучшить доступность и SEO ваших значков SVG — использовать атрибуты и роли ARIA (Доступные многофункциональные интернет-приложения). ARIA — это набор стандартов, определяющих, как веб-элементы могут сообщать о своем состоянии, свойствах и действиях вспомогательным технологиям. Атрибуты и роли ARIA можно добавить к элементу или к его дочерним элементам, в зависимости от контекста и сложности значка. Например, может указывать на то, что значок является чисто декоративным и его следует игнорировать программам чтения с экрана.
Оптимизация кода и производительности
Значки SVG могут выиграть от оптимизации кода и производительности, чтобы улучшить взаимодействие с пользователем и SEO вашей веб-страницы. Эти методы оптимизации включают удаление ненужного кода, такого как комментарии, пробелы, метаданные и значения по умолчанию, которые могут увеличить размер файла и время загрузки значка SVG. Вы можете использовать такие инструменты, как SVGO или SVGOMG, для автоматизации этого процесса. Кроме того, CSS или JavaScript можно использовать для стилизации, анимации или взаимодействия со значком SVG вместо встраивания стилей или скриптов в код, что делает его более модульным, удобным в сопровождении и отзывчивым. В зависимости от варианта использования и поддержки браузера вы также можете использовать шрифты значков, спрайты или встроенные SVG, чтобы уменьшить HTTP-запросы и увеличить скорость рендеринга значка SVG.
Тестирование и проверка ваших значков SVG
Важно протестировать и проверить ваши значки SVG, чтобы гарантировать их доступность, SEO-дружественность и совместимость с различными устройствами, браузерами и платформами. Инструмент WebAIM WAVE может проверить вашу веб-страницу на наличие проблем с доступностью и предоставить обратную связь.