4

Есть файл SVG с кучей иконок. Структура файла простая:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
  <symbol viewBox="0 0 52 52" id="symbol1" xmlns="http://www.w3.org/2000/svg">
    <path … />
  </symbol>
  …
  <symbol viewBox="0 0 52 52" id="symbolN" xmlns="http://www.w3.org/2000/svg">
    <path … />
  </symbol>
</svg>

Этот файл используется как источник иконок на сайте стандартным образом с помощью обращения ко внутренним элементам по их ID:

<svg class="symbol1"><use xlink:href="symbols.svg#symbol1"></use></svg>

И это работает. То есть, файл годный.

Хочу использовать данные иконки с помощью CSS (там, где могу влиять только на стиль, но не на структуру HTML). Остановился на использовании CSS-масок (mask / mask-image).
Вот таким образом:

symbol6 {
  background-color: orange;
  --svg6: url('symbols.svg#anywhere_chat');
  -webkit-mask: var(--svg6);
  mask: var(--svg6);
}
<span class="symbol6 " />

Всё в точности как интернет подсказывает. А не работает, зараза такая.

К сожалению, SO не позволяет приаттачить к сниппету файл, а кросc-доменно это вообще не работает. Выложил у себя: http://inquisitor.clan.su/test/svg/svgtest.html (в левой ячейке второй строки должна быть оранжевая иконка).

Что я делаю не так?

6
  • хорошо бы увидеть весь код, что бы покапаться, хотя бы на гите. А так что-то подсказывает, что все дело в спан, но это не точно)
    – Maneken
    4 июн в 6:32
  • 1
    По первому варианту, не работает из-за CORS, локально через file:// никогда не позволит подгрузить, только если поднимать локальный сервер и ссылаться на SVG в нём, и то, вероятно, потребуется повозиться. С внешних источников можно грузить при crossorigin="anonymous", если, конечно, север пришлёт header, т.е. не для всех серверов. По второму варианту надо посмотреть что происходит.
    – DiMithras
    4 июн в 12:59
  • 1
    Во втором варианте тоже CORS. Например, с таким SVG работает без проблем без внесения каких-либо правок в код, изменён только url. Сервер отдаёт в headers Access-Control-Allow-Origin: * и логотип подгружается.
    – DiMithras
    4 июн в 13:12
  • @Maneken, там по ссылке всё есть. 7 июн в 13:51
  • @DiMithras, я все вместе на сайте я выложил. "External", видимо, дезинформирует, но там файл с иконками ледит рядом со страничкой. 7 июн в 13:53

2 ответа 2

1
+100

Протестировал разные сценарии, что могу сказать по итогу.

Случай 1

Да, работает отлично только с same-origin, т.е. только с тем же доменом. Как не изгаляйся, из под use в svg с внешних источников загрузить не получится.

Подробнее на Mozilla, третий абзац.

Но, выдумать кое-что интересное, всё же, можно. Например загрузить SVG как текст через fetch в , затем создать SVG через document.createElementNS и работать с ним, ссылаясь на необходимые символы. Но, согласитесь, это изврат. К тому же загрузка SVG даже через JS будет ерепениться, об этом подробнее дальше.

Случай 2

Опять же, если тут внешний ресурс, то не так всё строго. Если Access-Control-Allow-Origin позволяет загрузить, то загрузится. Если не позволяет, то можно использовать что-то вроде данного прокси, который проставляет нужный header, но на постоянной основе так делать не станешь, да и упомянутый ресурс даёт пользоваться временно for debugging purposes.

Что касается утверждения "Does not work at all". На самом деле работает, но не с symbol.
Символы находятся в shadow DOM, доступ к которому есть внутри SVG, как в случае 1, но CSS его не видит, поэтому выдаёт пустую картинку.

CSS в данном виде отлично работает с ID селектором если помещать иконки не в symbols, а в view. Чтобы было понятно о чём речь, на примере двух иконок:

<svg viewBox="0 0 104 52" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <view id="some_icon" viewBox="52 0 52 52">
   <title>Some icon</title>
  </view>
  <view id="anywhere_chat" viewBox="0 0 52 52">
   <title>Anywhere chat</title>
  </view>
 </defs>
 <path d="M26 2.7c-13.21 0-24 9.62-24 21.59v.42a20.64 20.64 0 007.71 15.43l.32.27v.08a11.05 11.05 0 01-3.1 4.67 1.79 1.79 0 001.45 3.12l1.17-.17.53-.08c4.76-.73 8.13-1.59 10.23-2.66l.15-.08.5.11a27.38 27.38 0 005.06.48c13.21 0 24-9.62 24-21.59S39.21 2.7 26 2.7z" id="anywhere_chat1"/>
 <path d="M 54 25 C 54 13 65 4 78 4 C 92 4 102 13 102 26 C 102 38 91 47 78 48 C 74 48 70 46 66 44 C 65 44 65 44 64 44 L 56 47 C 55 48 54 47 54 46 L 57 38 C 58 37 58 37 57 36 C 55 33 54 29 54 25 Z M 66 17 C 65 17 64 17 64 18 C 64 19 65 20 66 20 L 93 20 C 94 20 95 19 95 18 C 95 17 94 17 93 17 L 66 17 Z M 64 26 C 64 25 65 25 66 25 L 87 25 C 88 25 89 25 89 26 C 89 27 88 28 87 28 L 66 28 C 65 28 64 27 64 26 Z M 66 33 C 65 33 64 34 64 35 C 64 36 65 36 66 36 L 80 36 C 81 36 82 36 82 35 C 82 34 81 33 80 33 L 66 33 Z" fill-rule="evenodd"/>
</svg>

Таким образом можно хранить иконки в одном SVG и обращаться в коллекции к определённой через ID селектор. Но для этого придётся переформатировать изначальный SVG на вашем сайте и разбить на view. Но как-то слишком сложно, даже если писать под это скрипт.

Также можно, опять же, изгаляться через JS, загрузить искомый SVG, найти по ID текстово нужную иконку, заменить symbol на svg и создать как отдельный SVG, затем использовать. И, опять, это слишком муторно и сложно, на странице для пользователя такое использовать через чур угрюмо.

В итоге

Можно использовать первый вариант в пределах одного домена, почему бы и нет. Но, искомый файл symbols.svg весит 338kb, многовато для иконок на мой взгляд.

IMHO, лучше разбить на отдельные файлы и использовать каждую иконку по необходимости. Так и вес будет меньше, и второй способ будет работать. Преобразование не должно быть сложным, достаточно регулярками выцепить symbol, заменить на svg, взять id как имя файла и убрать из строки, сохранить отдельными файлами.

Прочие варианты возможны, но это сродни извращению.

3
  • Ага. Отлично, изменить сам файл SVG и сменить Symbol на View мне подходит. Буду пробовать. Что до размера - я просто взял готовое, когда начну приделывать, удалю все лишние иконки оттуда. 7 июн в 13:55
  • а есть ли какой-то способ задать view или любой другой не-теневой элемент так ,чтобы не пересчитывать Path'ы для иконок? Сейчас они друг на дружке лежат. 7 июн в 14:26
  • @Инквизитор пересчитать придётся. Но, благо, они все одного размера, так что можно в линию по X выстроить добавляя к каждому view и каждой иконке 52xN. Также попробуйте на примере двух заранее. Выбираться и показываться они будут, но надо будет немного размеры отображения подкрутить.
    – DiMithras
    7 июн в 16:39
0

Предлагаю способ приблизится к решению задачи если она звучит: "Хочу использовать данные иконки с помощью CSS (там, где могу влиять только на стиль, но не на структуру HTML)."

*я пришел к выводу что заставить работать именно таким образом код на сегодняшний день невозможно(к сожалению тег use не работает внутри url() ни в base64, ни в utf8.

Для автоматизации ручной работы я написал скрипт.

Основная идея скрипта:

  • мы составляем список нужных символов
  • скрипт ищет все символы (как альтернатива нашему списку)
  • для символов из списка генерируется CSS правило
  • вывод перенаправляем в файл

Польза от скрипта в том что мы будем генерировать стили только для нужных нам символов и не будем нагружать сайт дополнительной работой в виде скриптов js. В данном случае я использовал Python как наиболее простой инструмент для парсинга.

РЕШЕНИЕ 1:

Скрипт для генерации только стилей (рядом должен лежать файл symbols.svg):

gencss.py:

from bs4 import BeautifulSoup

file = 'symbols.svg'
lst = ['activity','ad_set','add','add_source','adduser','adjust_value','advanced_function','advertising']
rules = ''

with open(file, "r") as f:
  soup = BeautifulSoup(f.read(), 'xml')

symbols = soup.find_all('symbol')

for symbol in symbols:
  try:
    name = symbol.attrs['id']
    if (not name in lst): continue # закомментируйте строку для игнорирования списка
    content = symbol.encode_contents().decode("utf-8").replace('"', '\'')
    rules += '''
.icon-''' + name + '''{ 
  background-color:orange;
  --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>''' + content + '''</svg>");
  -webkit-mask-image: var(--svg-mask);
  mask-image: var(--svg-mask);
}'''      
  except:  
    pass
    
print(rules)

Использование скрипта:

  • Отредактировать список необходимых символов в переменной lst
  • Запустить скрипт в консоли: python3 gencss.py > symbols.css

Для генерации кода для всех символов достаточно заккоментировать строку

if (not name in lst): continue # пропускает символы не из списка

При желании скрипт можно доработать, чтобы он принимал список через строку аргументов (решил не усложнять).

ДЕМОНСТРАЦИЯ:

Этот скрипт, для создания DEMO файла html выводящего таблицу с имеющимися символами и их именами разумеется его можно всячески улучшать:

  • Библиотечную URI кодировку решил не применять так как она будет забивать пути символами (хотел отставить их оригинальными, к тому же это экономия на размере) работоспособность проверял на Firefox и Chromium, в случае если где-то еще не будет работать придется делать полную конвертацию URI (а возможно эта конвертация вовсе не нужна, не проверял)

script.py:

from bs4 import BeautifulSoup

file = 'symbols.svg'
rules = ''
rows = '' 
counter = 0

with open(file, "r") as f:
  soup = BeautifulSoup(f.read(), 'xml')

symbols = soup.find_all('symbol')

for symbol in symbols:
  try:
    name = symbol.attrs['id']
    content = symbol.encode_contents().decode("utf-8").replace('"', '\'')
    counter += 1
    rules += '''
      .icon-''' + name + '''{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>''' + content + '''</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }'''      
    rows += f'<tr><td>{counter}</td><td>{name}</td><td><span class="icon-{name}"></span></td></tr>'
  except:  
    pass

styles = '''
    table {border-collapse:collapse;}

    td, th {border:1px solid #ddd; padding:5px 10px;}

    span {
      background-repeat: no-repeat;
      background-position: center left;
      width:50px;
      line-height:50px;
      height:50px;
      display:block;
      background-size:50px 50px;
    }
    
    svg {
      width:50px;
      line-height:50px;
      height:50px;
      display:block;
    }    
'''

print(f'''<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    {rules}
    {styles}
  </style>
</head>
<body>
  <table>
    <tbody>
      {rows}
    </tbody>
  </table>
</body>
</html>''')

Использование скрипта:

  • Запустить скрипт в консоли: python3 script.py > demo.htm

В итоге мы получаем примерно такой html файл:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    
      .icon-activity{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<path d='M37.618 11.67c-1.54.5-2.783.98-3.723 1.438-.747.364-1.687.901-2.814 1.61.086 1.882.084 3.463-.009 4.754-.094 1.304-.342 3.173-.746 5.63l-.001.003c2.815 2.028 4.848 3.56 6.11 4.604.163.135.633.584.856.783l4.344-1.82.028-.074c.627-1.347 1.145-3.186 1.54-5.507.322-1.899.376-3.99.159-6.276l-5.744-5.144zm-1.51-2.66l-.085-.302A19.816 19.816 0 0026 6c-1.963 0-3.86.285-5.653.816l-.032.77c-.002.548.006 1.172.025 1.871 1.69.237 3.111.549 4.273.941 1.167.395 2.652 1.07 4.478 2.029 1.39-.887 2.55-1.558 3.49-2.016.946-.461 2.12-.927 3.526-1.4zM22.165 42.95c3.618-.378 6.074-.736 7.317-1.06 1.421-.371 2.7-.724 3.83-1.054.86-2.042 1.409-3.576 1.648-4.6.192-.82.397-1.923.616-3.31-.383-.338-.735-.64-1.056-.906-1.257-1.04-3.382-2.637-6.362-4.777-1.382.809-2.58 1.367-3.62 1.675-1.12.332-2.855.604-5.256.835-.88 1.877-1.447 3.354-1.697 4.414-.254 1.078-.492 2.575-.71 4.482.879 1.017 1.622 1.774 2.23 2.271.628.514 1.648 1.19 3.06 2.03zM9.433 37.355h4.577c.2-1.58.419-2.87.657-3.877.273-1.16.817-2.63 1.634-4.424-1.055-1.218-2.377-2.756-2.987-3.701-.524-.811-1.314-1.703-2.217-3.899a5.903 5.903 0 00-1.272.288c-1.127.393-2.356 1.045-3.684 1.958A20.36 20.36 0 006 26.1c0 4.169 1.266 8.043 3.433 11.255zm35.895-6.076a20.187 20.187 0 00.625-6.562c-.333 1.675-.74 3.122-1.225 4.344.15.253.274.536.37.848.101.33.178.787.23 1.37zM10.57 18.5l.13-.214c1.413-2.31 2.502-3.924 3.305-4.882.739-.883 1.853-1.95 3.356-3.226a73.318 73.318 0 01-.045-2.184A20.155 20.155 0 007.04 19.696a15.17 15.17 0 011.852-.795 8.697 8.697 0 011.678-.403zM37.154 42.78c-1.708.587-4.01 1.253-6.913 2.011-1.408.368-3.925.738-7.601 1.125 1.092.186 2.215.283 3.36.283 4.127 0 7.966-1.26 11.154-3.42zM50 26.1c0 13.3-10.755 24.1-24 24.1S2 39.4 2 26.1 12.755 2 26 2s24 10.8 24 24.1z'/>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-ad_set{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<g><path d='M22.5 5.1h-17c-.8 0-1.5.7-1.5 1.5v15.9c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5V6.6c0-.8-.7-1.5-1.5-1.5zm-2.6 8.2H8.1V9.2h11.8v4.1zM46.5 5.1h-17c-.8 0-1.5.7-1.5 1.5v15.9c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5V6.6c0-.8-.7-1.5-1.5-1.5zm-2.6 8.2H32.1V9.2h11.8v4.1z'/></g><g><path d='M22.5 28h-17c-.8 0-1.5.7-1.5 1.5v15.9c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5V29.5c0-.8-.7-1.5-1.5-1.5zm-2.6 8.2H8.1v-4.1h11.8v4.1zM46.5 28h-17c-.8 0-1.5.7-1.5 1.5v15.9c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5V29.5c0-.8-.7-1.5-1.5-1.5zm-2.6 8.2H32.1v-4.1h11.8v4.1z'/></g>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-add{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<path d='M30 29h16.5c.8 0 1.5-.7 1.5-1.5v-3c0-.8-.7-1.5-1.5-1.5H30c-.6 0-1-.4-1-1V5.5c0-.8-.7-1.5-1.5-1.5h-3c-.8 0-1.5.7-1.5 1.5V22c0 .6-.4 1-1 1H5.5c-.8 0-1.5.7-1.5 1.5v3c0 .8.7 1.5 1.5 1.5H22c.6 0 1 .4 1 1v16.5c0 .8.7 1.5 1.5 1.5h3c.8 0 1.5-.7 1.5-1.5V30c0-.6.4-1 1-1z'/>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-add_source{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<path d='M12.58 5.38c.44-.44 1.15-.44 1.59 0l17 17.02.6.6h8.9c.6 0 .89-.79.5-1.19l-2.48-2.48c-.4-.4-.4-1.09 0-1.49l1.49-1.49c.4-.4 1.09-.4 1.49 0l8.03 8.03c.4.4.4.99 0 1.49l-8.03 7.93c-.4.4-1.09.4-1.49 0l-1.49-1.49c-.4-.4-.4-1.09 0-1.49l2.58-2.48c.4-.4.07-1.19-.5-1.19h-8.39l-1.2 1.2-17.02 17.04c-.44.44-1.15.44-1.59 0l-1.4-1.4c-.44-.44-.44-1.15 0-1.59l12.46-12.46c1.02-1.02.3-2.77-1.15-2.77H3.08c-.61 0-1.09-.5-1.09-1.09V24c0-.6.42-1.05 1.02-1.05 6.29 0 12.56.02 18.84.03 1.45 0 2.17-1.75 1.15-2.77L11.17 8.37c-.44-.44-.44-1.15 0-1.59l1.4-1.4z' fill-rule='evenodd'/>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-adduser{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<g><path d='M21.9 37c0-2.7.9-5.8 2.3-8.2 1.7-3 3.6-4.2 5.1-6.4 2.5-3.7 3-9 1.4-13-1.6-4.1-5.4-6.5-9.8-6.4s-8 2.8-9.4 6.9c-1.6 4.5-.9 9.9 2.7 13.3 1.5 1.4 2.9 3.6 2.1 5.7-.7 2-3.1 2.9-4.8 3.7-3.9 1.7-8.6 4.1-9.4 8.7C1.3 45.1 3.9 49 8 49h17c.8 0 1.3-1 .8-1.6-2.5-2.9-3.9-6.6-3.9-10.4z'/><path d='M37.9 25c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12zM44 38c0 .6-.5 1-1.1 1H40v3c0 .6-.5 1-1.1 1h-2c-.6 0-.9-.4-.9-1v-3h-3.1c-.6 0-.9-.4-.9-1v-2c0-.6.3-1 .9-1H36v-3c0-.6.3-1 .9-1h2c.6 0 1.1.4 1.1 1v3h2.9c.6 0 1.1.4 1.1 1v2z'/></g>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-adjust_value{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<path d='M23 14.91a6.55 6.55 0 11-6.52 6.55A6.53 6.53 0 0123 14.91zm20.7 15.72a.58.58 0 000-.84l-4.12-4.12a.59.59 0 00-.42-.18.61.61 0 00-.43.18L27.39 37.05l-1.7 5.69a.8.8 0 00.79 1 .55.55 0 00.18 0L32.35 42zm-1.45-7.75L46.4 27a.63.63 0 00.43.18.59.59 0 00.42-.18c.73-.73 2.06-1.94 2.06-1.94a2 2 0 000-2.91L47.13 20a2 2 0 00-1.41-.54 2.34 2.34 0 00-1.5.54s-1.33 1.31-1.93 2a.58.58 0 000 .88zM40.1 8.27H6a4 4 0 00-3.93 4v19.07A4 4 0 006 35.28h18.84l3.95-3.94H10.54A4.53 4.53 0 006 26.76v-9.88a4.53 4.53 0 004.56-4.57h25a4.53 4.53 0 004.56 4.57v3L44 15.91v-3.6a4 4 0 00-3.9-4.04z'/>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-advanced_function{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<path d='M43 6.9V4c0-.8-.7-1.5-1.5-1.5H11.8c-.8 0-1.5.7-1.5 1.5v3.1c0 .3 0 .7.3 1L25.2 26 10.6 43.9c-.2.3-.3.6-.3 1V48c0 .8.7 1.5 1.5 1.5h29.7c.8 0 1.5-.7 1.5-1.5v-2.9c0-.8-.7-1.5-1.5-1.5H18.4l13.3-16.3c.3-.4.4-.8.4-1.4 0-.5-.2-1-.5-1.4L18.4 8.4h23.1c.8 0 1.5-.7 1.5-1.5z'/>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
      .icon-advertising{ 
        background-color:orange;
        --svg-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>b'<g><path d='M23 27.2h.4c.2-2.7 1.2-5.1 2.7-7-.8-.8-1.8-1.3-3.1-1.3-2.4 0-4.2 1.8-4.2 4.2 0 2.3 1.8 4.1 4.2 4.1z'/><path d='M24.2 35.2c.5 0 1-.1 1.2-.1-.8-1.3-1.4-2.7-1.7-4H23c-4.5 0-8.4-3.6-8.4-8.4 0-4.5 3.6-8.4 8.4-8.4 2.5 0 4.9 1.1 6.4 2.9 1.2-.7 2.5-1.1 3.9-1.3-2.3-3.3-6.1-5.4-10.4-5.4-7.2 0-12.6 5.7-12.6 12.6S16 35.7 23.2 35.4c.4-.1.7-.1 1-.2z'/><path d='M49.9 45.5v1.4c0 1.6-1.4 3-3 3H22.8c-1.6 0-3-1.4-3-3v-1.4c0-3.6 4.3-5.9 8.3-7.7l.4-.2c.3-.1.6-.1.9.1 1.6 1.1 3.5 1.6 5.4 1.6 1.9 0 3.8-.6 5.4-1.6.3-.2.6-.2.9-.1l.4.2c4.2 1.8 8.4 4 8.4 7.7zM34.8 19.8c4.2 0 7.5 3.7 7.5 8.3s-3.3 8.3-7.5 8.3-7.5-3.7-7.5-8.3 3.4-8.3 7.5-8.3z'/><path d='M18.5 39.2c-6.9-2-12.2-8.5-12.2-16.1 0-9.3 7.5-16.8 16.8-16.8 6.9 0 13.1 4.1 15.6 10.2 2 .8 3.8 2.1 5.1 3.8C42.3 9.8 33.6 2.1 23 2.1 11.3 2.1 2.1 11.3 2.1 23c0 9.2 5.8 17 14.2 19.7.4-1.4 1.2-2.5 2.2-3.5z'/></g>'</svg>");
        -webkit-mask-image: var(--svg-mask);
        mask-image: var(--svg-mask);
      }
    
    table {border-collapse:collapse;}

    td, th {border:1px solid #ddd; padding:5px 10px;}

    span {
      background-repeat: no-repeat;
      background-position: center left;
      width:50px;
      line-height:50px;
      height:50px;
      display:block;
      background-size:50px 50px;
    }
    
    svg {
      width:50px;
      line-height:50px;
      height:50px;
      display:block;
    }    

  </style>
</head>
<body>
  <table>
    <tbody>
      <tr><td>1</td><td>activity</td><td><span class="icon-activity"></span></td></tr><tr><td>2</td><td>ad_set</td><td><span class="icon-ad_set"></span></td></tr><tr><td>3</td><td>add</td><td><span class="icon-add"></span></td></tr><tr><td>4</td><td>add_source</td><td><span class="icon-add_source"></span></td></tr><tr><td>5</td><td>adduser</td><td><span class="icon-adduser"></span></td></tr><tr><td>6</td><td>adjust_value</td><td><span class="icon-adjust_value"></span></td></tr><tr><td>7</td><td>advanced_function</td><td><span class="icon-advanced_function"></span></td></tr><tr><td>8</td><td>advertising</td><td><span class="icon-advertising"></span></td></tr>
    </tbody>
  </table>
</body>
</html>

РЕШЕНИЕ 2:

Еще можно использовать подход с созданием кастомного шрифта, для этого можно воспользоваться сайтом icomoon.io на нем имеется возможность загрузить свои svg файлы, которые потом можно экспортировать как кастомный шрифт:

введите сюда описание изображения

Для того чтобы экспортировать все символы в svg я модифицировал скрипт.

export.py:

import os
from bs4 import BeautifulSoup

file = 'symbols.svg'
out_dir = 'icons'

with open(file, "r") as f:
  soup = BeautifulSoup(f.read(), 'xml')

symbols = soup.find_all('symbol')

os.mkdir(out_dir)
for symbol in symbols:
  try:
    name = symbol.attrs['id']
    content = symbol.encode_contents().decode("utf-8")
    with open(f'{out_dir}/{name}.svg', 'w') as w:
       w.write(f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">{content}</svg>')
  except:  
    pass

Использование скрипта (рядом с ним должен лежать файл symbols.svg):

  • Запустить скрипт в консоли: python3 export.py

Скрипт создает папку в той же дирректории с именем icons куда помещает все символы под именами {id}.svg.

После того как иконки будут импортированны на сайт icomoon.io можно выбрать нужные

введите сюда описание изображения

и экспортировать задав нужные параметры:

введите сюда описание изображения

введите сюда описание изображения

4
  • Запихивать в url в css полный код SVG иконки — это как раз тот самый изврат, о котором писал 😁 Но в целом ничто не мешает сделать парсинг файла в JS и подставлять значения динамически в том же духе.
    – DiMithras
    9 июн в 5:15
  • @DiMithras да, но тут это генерится до исполнения и не требует дальнейшей обработки, к тому же экономит трафик) хотя дело вкуса 9 июн в 6:12
  • Не назвал бы это вкусовщиной. В плане удобства — да. Если сервер на Flusk / Django, довольно удобно генерировать страницы, и упаковать подобное можно довольно красиво в рамках разработки страниц. Но с точки зрения антипаттернов — это не только моё мнение, например. Приоритизация, кеширование и т.д., в общем то решаемо если через JS делать.
    – DiMithras
    9 июн в 8:49
  • 1
    @DiMithras, спасибо — иногда стоит посмотреть на свой ответ чужими глазами. Переработал свой ответ, надеюсь теперь он яснее выражает ту идею которую я предложил. 9 июн в 9:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.