Svg icon: SVG Repo — Free SVG Vectors and Icons

11.03.2023 alexxlab

Содержание

Еще не используешь SVG фавиконки? / Хабр

Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).

Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется.

Иконка

Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.

<link rel="icon" href="favicon.svg">

Тач-иконки

Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180, и атрибут sizes лишний.

Манифест

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.

Значок используется Android и Chrome. Нужен только самый большой размер 512 x 512.

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon. png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

theme-color meta по-прежнему требуется для цвета иконки в Chrome и Android.

<meta name="theme-color" content="#ffffff">

Готово

Вот и все, что вам нужно для современных браузеров, все остальное не нужно. msapplication-TileImage можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется apple-touch-icon. TileColor больше не используется.

Все остальное

К сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.

Темный режим

В заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя.

Этот метод не будет работать со mask-icon, так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Результат

Вот окончательный результат. Скопируйте его в <head> вашего веб-сайта и не забудьте разместить favicon.ico в корне.

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Использование SVG иконок с помощью Angular Material | by Aleksandr Serenko | F.

A.F.N.U.R

В данной статье приведу несколько решений как можно использовать Angular Material для вывода пользовательских иконок в SVG.

В документации Angular Material есть часть, которая связана с иконками — SVG icons.

Основная идея вывода иконок с помощью Material заключается в встраивании svg напрямую в документ, что позволяет стилизовать иконки с помощью CSS.

Есть два способа создания иконки:

Первый способ это использовать путь до SVG иконки. Это решение будет аналогично работе тега img. MatIconRegistry будет загружать иконку по http и вставлять содержимое в HTML, где используется иконка.
Второй способ это использовать содержимое SVG и создавать иконку без дополнительных http запросов. Для этого просто создаются константы, значение которых и будет содержимое SVG.

Пример создания SVG иконки, указав путь до иконки:

Пример создания SVG иконки, используя содержимое иконки:

Для того чтобы не импортировать MatIconRegistry и DomSanitizer каждый раз, создадим простенький сервис — IconService:

В сервисе реализовано два метода:

add — создание иконки из содержимого SVG, где первый аргумент это имя иконки, второй аргумент это содержимое SVG.
addPath — создание иконки с использованием пути до иконки, где первый аргумент это имя иконки, второй аргумент это путь до SVG иконки.

Отмечу, что в Angular вы можете использовать пути иконок, которые расположены в assets. Однако путь до них нужно указывать начиная с assets, также как это делается при использовании картинок в HTML или CSS в Angular:

/assets/icons/telegram.svg

Сравнение решений

У каждого из решений есть свои плюсы и минусы.

Использование путей до иконок.

плюсы:

Не увеличивает исходную сборку проекта

минусы:

На каждую созданную иконку будет сделан HTTP запрос.
При использовании SSR могут быть проблемы при сборке проекта, так как нужно особым образом обрабатывать запросы по загрузке иконок. Проблема проявляется при использовании пререндера.
При медленном интернете иконки могут быть не загружены и пользователь, который получит страницу, может увидеть нежелательные сайд эффекты.

демо:

Использование содержимого SVG.

плюсы:

Не создает дополнительных запросов к серверу
Нет проблем с SSR
Нет проблем с отображением при медленном интернете

минусы:

Существенно увеличивает сборку проекта, так как все исходники SVG будут храниться в билде.

Если не загружать все иконки в главном модуле, а создавать иконки только в тех местах, где они используются и создавать lazy-loading модули, то негативный эффект может быть сведен к нулю.

демо:

Резюме

В статье разобраны примеры создания пользовательских иконок SVG c помощью Angular Material. Приведено два решения: создание иконок с использованием путей до иконок, а также создание иконок из содержимого SVG. В конце статьи разобраны плюсы и минусы каждого из приведенных решений.

Ссылки

Все исходники находятся на github, в репозитории:

GitHub — Fafnur/angular-samples: Samples of using different solutions in Angular

Samples of using different solutions in Angular.

github.com

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — icons.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln

javascript — самый практичный способ загрузки значков svg на html-страницу без повторения? / Должен ли я использовать?

В настоящее время я работаю над новым проектом Angular, и я не доволен своей реализацией SVG-значка в моем другом проекте (с использованием @ngneat/svg-icon). Для этого требуется, чтобы файлы SVG находились в папке, затем регистрировались в Typescript, а затем скомпилировались в файлы (iconName).ts со сценарием, который необходимо запустить.

Более простой способ

В моем текущем проекте я использую Bootstrap, и при изучении документации я наткнулся на следующую реализацию svg:

Источник: https://getbootstrap.com/docs/5. 0/components/alerts/

При таком использовании я должен вставлять только значки svg в символы и иметь все значки в скрытом элементе, который я загружаю где-то на странице. Присвоив им соответствующий идентификатор, я мог бы использовать значки SVG в любом месте страницы, используя xlink:href.

Слишком хорошо, чтобы быть правдой

Согласно MDN, атрибут xlink:href устарел (Источник). Но поскольку его использует загрузчик, и я нашел много сообщений о том, что он никогда не будет удален, потому что его использует очень много сайтов, у меня возникает соблазн по-прежнему использовать его

Нерекомендуемая альтернатива

На странице MDN SVG (Источник) Я обнаружил, что в следующем примере используется не xlink:href, а только href. Сначала я думал, что это можно использовать только для ссылки на другой путь в том же SVG, но после того, как я попробовал это на моем сайте, это сработало.

Вопрос

Итак, вопрос tl:dr: «Как мне реализовать мои значки?», но вот вопросы, ведущие к этому:

Вы все еще рекомендуете xlink:href, поскольку загрузчик использует его?
Является ли допустимой альтернативой или она должна быть другой?
Влияют ли пути с display none на производительность или загрузку страницы, поскольку все вышеупомянутые возможности включают все мои значки svg (даже если они не используются на конкретной странице) в html?

SvgIcon API — Material UI

Редактировать эту страницу

Справочные документы по API для компонента React SvgIcon. Узнайте о реквизитах, CSS и других API этого экспортированного модуля.

Демонстрации

Импорт

 импорт SvgIcon из '@mui/material/SvgIcon';
// или
импортировать {SvgIcon} из '@mui/material';

Вы можете узнать о разнице, прочитав это руководство по минимизации размера пакета.

Имя компонента

Имя MuiSvgIcon можно использовать при предоставлении реквизитов по умолчанию или переопределений стиля в теме.

Реквизиты

Реквизиты собственного компонента также доступны.

Название	Тип	По умолчанию	Описание
Дети	NODE		NODE. Пропустил в SPG.
классы	объект		Переопределение или расширение стилей, примененных к компоненту. Дополнительные сведения см. в разделе CSS API ниже.
цвет	«наследовать» \| ‘действие’ \| ‘отключено’ \| «основной» \| «вторичный» \| ‘ошибка’ \| ‘информация’ \| «успех» \| ‘предупреждение’ \| string	‘наследовать’	Цвет компонента. Он поддерживает как стандартные, так и пользовательские цвета темы, которые можно добавить, как показано в руководстве по настройке палитры. Вы можете использовать реквизит `htmlColor` , чтобы применить атрибут цвета к элементу SVG.
компонент	elementType		Компонент, используемый для корневого узла. Либо строка для использования HTML-элемента, либо компонента.
fontSize	«наследовать» \| ‘большой’ \| ‘средний’ \| «маленький» \| строка	‘средний’	Размер шрифта, примененный к значку. По умолчанию 24 пикселя, но можно настроить для наследования размера шрифта.
htmlColor	строка		Применяет атрибут цвета к элементу SVG.
inheritViewBox	bool	false	Если `true` , корневой узел унаследует пользовательский компонент `компонент1 bedBox bedBox viewBox1 будет игнорироваться, Полезно, когда вы хотите сослаться на пользовательский компонент и передать SvgIcon viewBox этого компонента корневому узлу.`
shapeRendering	string		Атрибут рендеринга формы. Поведение различных параметров описано в веб-документах MDN. Если у вас возникли проблемы с размытыми значками, вам следует изучить этот реквизит.
sx	Array \| объект \| логический> \| функция \| object		Системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS. См. страницу `sx` для более подробной информации.
titleAccess	string		Предоставляет удобочитаемый заголовок для содержащего его элемента. https://www.w3.org/TR/SVG-access/#Equivalent
viewBox	string	'0 0 24 24'	Позволяет переопределить, что означают координаты без единиц измерения внутри SVG-элемент. Например, если элемент SVG имеет размеры 500 (ширина) на 200 (высота) и вы передаете viewBox="0 0 50 20", это означает, что координаты внутри SVG будут идти от верхнего левого угла (0,0) справа внизу (50,20), и каждая единица будет стоить 10 пикселей.

ref пересылается в корневой элемент.

CSS

Наименование правила	Глобальный класс	Описание
ROOT	. MuisvgiCon-Root	.
colorPrimary	.MuiSvgIcon-colorPrimary	Стили применяются к корневому элементу, если `color="primary"` .
colorSecondary	.MuiSvgIcon-colorSecondary	Стили применяются к корневому элементу, если `color="secondary"` .
colorAction	.MuiSvgIcon-colorAction	Стили применяются к корневому элементу, если `color="action"` .
colorError	.MuiSvgIcon-colorError	Стили применяются к корневому элементу, если `color="error"` .
colorDisabled	.MuiSvgIcon-colorDisabled	Стили применяются к корневому элементу, если `color="disabled"` .
fontSizeInherit	.MuiSvgIcon-fontSizeInherit	Стили применяются к корневому элементу, если `fontSize="inherit"` .
fontSizeSmall	.MuiSvgIcon-fontSizeSmall	Стили применяются к корневому элементу, если `fontSize="small"` . Навигация по записям Предыдущая запись Нарисовать рекламу товара: Как нарисовать рекламу товара 6-7 класс поэтапно? Следующая запись Как создать новый файл в фотошопе: Как создать новый файл в Adobe Photoshop Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Поиск: Рубрики Seo Wordpress Дизайн Заработок Плагин Разное Рекомендац Сайт Совет Советы Тем Темы Урок Уроки © Орфографика.рф, 2010 - 2019 Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования. При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». Вопросы и предложения: info@орфографика.рф.