Иконки svg: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

09.07.2023 alexxlab

Содержание

Пользовательские иконки : Custom icons : Документация UIkit 3

Библиотека иконок 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 будет создана новая иконка, которую в дальнейшем можно будет использовать в проекте как . Если icon это единственный параметр в значении атрибута, то можно использовать  (подробнее).

Чтобы проверить, какие имена уже используются, посмотрите в двух каталогах

/src/images/components и /src/images/icons. При создании новой иконки убедитесь, что её имя не используется ни в одной из этих двух папок. В противном случае иконка будет перезаписана.

Примечание Можно просто при создании / добавлении новых иконок использовать в названии файла префикс.

При добавлении пользовательского префикса (в названии файла) вопрос с случайной перезаписью иконки исчезает сам по себе. К примеру , если будет добавлена иконка с именем

my_close.svg по пути /custom/icons/my_close.svg, то она не перезапишет значок закрытия по умолчанию, а создаст новую иконку с именем my_close, которую в дальнейшем можно будет использовать в проекте как .

UIkit 3 Документация UIkit 3

css — Позиционирование иконки svg относительно текста HTML

В меню есть несколько svg. Проблема в том, что текст рядом с ними почему-то отображается немного ниже, хотя у общего для них дива задан display: flex, align-items: flex-start. Это не критично, конечно.

Но хотелось бы знать, в чем может быть причина. Посмотреть можно здесь: https://codepen.io/Enena/pen/BajPmdG.

 <svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 512.006 512.006"><title>call</title><path d="M502.05,407.127l-56.761-37.844L394.83,335.65c-9.738-6.479-22.825-4.355-30.014,4.873l-31.223,40.139 c-6.707,8.71-18.772,11.213-28.39,5.888c-21.186-11.785-46.239-22.881-101.517-78.23c-55.278-55.349-66.445-80.331-78.23-101.517 c-5.325-9.618-2.822-21.683,5.888-28.389l40.139-31.223c9.227-7.188,11.352-20.275,4.873-30.014l-32.6-48.905L104.879,9.956 C98.262,0.03,85.016-2.95,74.786,3.185L29.95,30.083C17.833,37.222,8.926,48.75,5.074,62.277 C-7.187,106.98-9.659,205.593,148.381,363.633s256.644,155.56,301.347,143.298c13.527-3.851,25.055-12.758,32.194-24.876 l26.898-44.835C514.956,426.989,511.976,413.744,502.05,407.127z"/><path d="M291.309,79.447c82.842,0.092,149.977,67.226,150.069,150.069c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.  952,8.828-8.828c-0.102-92.589-75.135-167.622-167.724-167.724c-4.875,0-8.828,3.952-8.828,8.828 C282.481,75.494,286.433,79.447,291.309,79.447z"/><path d="M291.309,132.412c53.603,0.063,97.04,43.501,97.103,97.103c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.073-63.349-51.409-114.686-114.759-114.759c-4.875,0-8.828,3.952-8.828,8.828 C282.481,128.46,286.433,132.412,291.309,132.412z"/><path d="M291.309,185.378c24.365,0.029,44.109,19.773,44.138,44.138c0,4.875,3.952,8.828,8.828,8.828 c4.875,0,8.828-3.952,8.828-8.828c-0.039-34.111-27.682-61.754-61.793-61.793c-4.875,0-8.828,3.952-8.828,8.828 C282.481,181.426,286.433,185.378,291.309,185.378z"/></symbol><symbol viewBox="0 0 512 512"><title>pin</title><path d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.   505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"/></symbol></svg>
<section>
    <div>
        <img src="/assets/img/logo.png" alt="Logo">
        <div>
            <h3>&#171;ЭкспертПро&#187;</h3>
            <h6>судебно-экспертная служба</h6>
        </div>
    </div>
    <div>
        <svg viewBox="0 0 20 20" preserveAspectRatio="none">
            <use xlink:href="#pin"/>
        </svg>
        <h5>Северо-Кавказский и Южный Федеральный округ</h5>
    </div>
    <div>
        <svg viewBox="0 0 20 20">
            <use xlink:href="#call" />
        </svg>
        <h5>8 (962) <span>454-50-10</span> <br>
            8 (918) <span>867-09-83</span>
        </h5>
    </div>
    <a href="#">Заказать звонок</a>
</section>

значков SVG | Могу ли я использовать.

.. Таблицы поддержки для 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: поддерживается

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: не поддерживается

Браузер 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. Это текстовые значения, которые предоставляют имя и описание значка соответственно. Их можно добавить как атрибуты к элементу