Какой самый элегантный способ использовать иконки SVG в качестве фона? - PullRequest
Новая
       9

Какой самый элегантный способ использовать иконки SVG в качестве фона?

0 голосов
/ 09 октября 2019

Я не эксперт по интерфейсу, и мне нужно всего несколько значков в моем приложении, поэтому я решил вместо того, чтобы полагаться на огромные пакеты значков, такие как font-awesome (которые поставляются с огромным CSS-файлом), я просто кодирую свои собственные значкиCSS. Вот то, что я использую (в scss): 

$icon-width: 24px;
$icon-height: 24px;
.thumbs-up {
  width: $icon-width;
  height: $icon-height;
  &:before {
    content: "   ";
    background: url(/icons/thumbs-up.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}

И я могу просто связать использование thumbs-up в моем html следующим образом: 

> <p class="thumbs-up" id="like"></p>

Это прекрасно работает, ямне интересно, есть ли какие-либо недостатки в этом или, может быть, есть более элегантные способы сделать это?

1 Ответ

0 голосов
/ 09 октября 2019

Проверьте контекст

Это зависит от контекста. Честно говоря, это лучший подход для вашего примера.

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

Если это просто для дизайна, используйте CSS. Если это обязательный контекст для страницы, используйте тег IMG, тег IMG поставляется с параметрами title и alt, которые объясняют контекст изображения, когда изображение не может быть отображено, помогаялюди с программами чтения с экрана и поисковыми системами.

Есть много других моментов, в которых оба отличаются, но они еще больше объясняют, почему CSS лучше подходит для чистого дизайна, а тег IMG предназначен для контекстных изображений.

Дополнительные вкусности SVG

Хотя SVG и являются файлами XML, и если вы встраиваете их на страницу (не с тегом IMG, а фактически вставляете их XML-код в html), вы можете манипулировать их элементами с помощьюCSS и JavaScript.

Например, посмотрите на Gitlab , если вы наведете курсор на их логотип в левом верхнем углу, вы заметите, что треугольники светятся там, где указывает ваша мышь. Это достижимо только путем встраивания кода SVG в страницу вместо использования CSS или тега IMG.

...