Каковы преимущества и недостатки различных методов значков SVG [закрыто] ⇐ Html

[Anonymous]

Если вам нравится использовать значки SVG в качестве класса CSS, я нашел три разных способа сделать это. Как контент, как SVG или как фоновое изображение:

Код: Выделить всё

.icon--tabler--code-1::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E");
}

.icon--tabler--code-2 {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E");
}

.icon--tabler--code-3 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E");
}

См. «Как использовать значки в CSS».
Каковы различия?
Есть ли какие-либо преимущества и недостатки или причины предпочесть один метод другому? Или это скорее дело вкуса?

Подробнее здесь: https://stackoverflow.com/questions/797 ... on-methods