Класс пути значка SVG в CSS

Я встраиваю следующий значок SVG в качестве path на свою HTML-страницу:

<svg xmlns = "http://www.w3.org/2000/svg" width = "10" height = "10" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

Как я могу включить указанный выше значок SVG path как class в CSS? Поэтому я могу просто использовать его как attribute на моей HTML-странице следующим образом:

<i class = "chevron-right"></i>

Обновление: что касается принятого ответа, у меня были некоторые проблемы с правильным центрированием значка по вертикали, и в итоге я нашел гораздо более простой код CSS:

.chevron-right {
    vertical-align: middle;
    content: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

css svg icons glyphicons

26.12.2020 06:01

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 696

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте его в качестве фона:

.chevron-right {
  display: inline-block;
  width: 1rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" width = "10" height = "10" viewBox = "0 0 16 16"><path fill-rule = "evenodd" d = "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat;
}

.chevron-right::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<i class = "chevron-right"></i>
<i class = "chevron-right" style = "width:2rem"></i>
<i class = "chevron-right" style = "width:4rem"></i>

Если вы хотите окраску, рассмотрите маску:

.chevron-right {
  display: inline-block;
  width: 1rem;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" width = "10" height = "10" viewBox = "0 0 16 16"><path fill-rule = "evenodd" d = "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain;
  background: currentColor;
}

.chevron-right::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<i class = "chevron-right"></i>
<i class = "chevron-right" style = "width:2rem;color:red;"></i>
<i class = "chevron-right" style = "width:4rem;color:blue;"></i>

26.12.2020 08:49

Создайте пользовательский элемент: <svg-icon path = "your d path"></svg-icon>

<style>
  svg-icon svg {
    width: 80px;
    height:80px;
    background: grey;
  }
</style>

<svg-icon path = "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></svg-icon>

<script>
  customElements.define("svg-icon", class extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "${this.getAttribute("path")}"/></svg>`;
    }
  });

</script>

Если вам нужны иконки, смотрите мой пет-проект IconMeister.github.io

26.12.2020 16:06

Другие вопросы по теме

Рисование с использованием пути к значку SVG

Как нарисовать дугу внутри другого круга с помощью svg

Почему пользовательские заголовки для «Политики безопасности контента» не работают на github?

Расширения azure-devops не принимают файлы SVG

Создание изображения из svg не работает

Значок SVG уничтожает цвет следующего значка SVG

Листовка - заливка многоцветным узором

Событие Click срабатывает все больше и больше раз

Заставить HTML Canvas генерировать штриховые рисунки в формате PDF?

Рендеринг SVG из объекта

Класс пути значка SVG в CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы