Как добавить новые иконки в существующие ионы - PullRequest
Новая
       42

Как добавить новые иконки в существующие ионы

0 голосов
/ 07 сентября 2018

Я использую Ionicons v1 в своем проекте ... Я добавляю новую функцию, для которой требуется множество иконок, которых нет в Ionicons. Раньше я никогда не баловался иконками шрифтов, поэтому я понятия не имею, что делаю. Однако я провел небольшое исследование и попытался сделать следующее:

Используя следующий метод, я попытался сделать это сам, но это не сработало.

Я преобразовал png в svg, используя бесплатный сервис https://www.pngtosvg.com/, затем импортировал этот svg в и другие бесплатные сервисы https://icomoon.io и получил его из нового исходного файла svg: 

HTML
<svg class="icon icon-valet"><use xlink:href="#icon-valet"></use></svg>

Symbol:
<symbol id="icon-valet" viewBox="0 0 32 32">
<title>valet</title>
<path d="M20.571 5.27c-1.142 0.183-2.337 1.133-2.707 2.154l-0.152 0.42h-8.292l-1.34 1.357 0.399 0.614c0.497 0.764 1.473 0.903 2.048 0.291 0.272-0.29 0.405-0.323 1.292-0.323s1.020 0.033 1.292 0.323c0.432 0.459 0.866 0.413 1.448-0.155l0.49-0.478 0.49 0.478c0.476 0.465 0.517 0.478 1.454 0.479h0.964l0.558 0.648c1.424 1.653 3.724 1.742 5.262 0.203 2.513-2.513 0.343-6.578-3.207-6.010zM22.933 8.813v0.969h-1.292v-1.938h1.292v0.969zM28.425 14.296c-0.799 0.193-1.472 0.807-2.143 1.957-0.278 0.477-0.528 0.674-1.502 1.186l-1.169 0.614-0.058 0.701c-0.149 1.804-0.9 2.135-4.852 2.138l-3.004 0.003v-1.292h2.77c3.429 0 4.127-0.241 3.698-1.276-0.239-0.576-0.601-0.662-2.795-0.662s-2.36-0.040-3.461-0.837l-0.628-0.455h-1.963c-2.474 0-2.703 0.098-4.533 1.936l-1.291 1.297 4.261 4.257 0.517-0.185c0.412-0.148 1.481-0.187 5.284-0.191l4.767-0.006 0.854-0.704c1.396-1.151 3.791-3.563 4.432-4.465 0.692-0.972 2.302-3.601 2.302-3.758 0-0.094-0.862-0.396-1.034-0.363-0.036 0.007-0.239 0.055-0.452 0.106zM4.032 20.348l-1.127 1.132 6.915 6.912 2.319-2.33-3.422-3.423c-1.882-1.883-3.452-3.423-3.49-3.423s-0.575 0.51-1.195 1.132zM6.625 22.797c-0.523 0.539-0.562 0.536-1.229-0.119-0.664-0.651-0.667-0.684-0.139-1.228l0.414-0.427 1.366 1.349-0.412 0.425z"></path>
</symbol>

CSS
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Используя эту информацию, я добавил следующий глиф в файл ionicons.svg: 

Orig:    unicode-range="U+F100-F4F7"
New:     unicode-range="U+F100-F4F8"

<glyph glyph-name="ion-valet" unicode="&#xf4f8;" horiz-adv-x="416"
d="M20.571 5.27c-1.142 0.183-2.337 1.133-2.707 2.154l-0.152 0.42h-8.292l-1.34 1.357 0.399 0.614c0.497 0.764 1.473 0.903 2.048 0.291 0.272-0.29 0.405-0.323 1.292-0.323s1.020 0.033 1.292 0.323c0.432 0.459 0.866 0.413 1.448-0.155l0.49-0.478 0.49 0.478c0.476 0.465 0.517 0.478 1.454 0.479h0.964l0.558 0.648c1.424 1.653 3.724 1.742 5.262 0.203 2.513-2.513 0.343-6.578-3.207-6.010zM22.933 8.813v0.969h-1.292v-1.938h1.292v0.969zM28.425 14.296c-0.799 0.193-1.472 0.807-2.143 1.957-0.278 0.477-0.528 0.674-1.502 1.186l-1.169 0.614-0.058 0.701c-0.149 1.804-0.9 2.135-4.852 2.138l-3.004 0.003v-1.292h2.77c3.429 0 4.127-0.241 3.698-1.276-0.239-0.576-0.601-0.662-2.795-0.662s-2.36-0.040-3.461-0.837l-0.628-0.455h-1.963c-2.474 0-2.703 0.098-4.533 1.936l-1.291 1.297 4.261 4.257 0.517-0.185c0.412-0.148 1.481-0.187 5.284-0.191l4.767-0.006 0.854-0.704c1.396-1.151 3.791-3.563 4.432-4.465 0.692-0.972 2.302-3.601 2.302-3.758 0-0.094-0.862-0.396-1.034-0.363-0.036 0.007-0.239 0.055-0.452 0.106zM4.032 20.348l-1.127 1.132 6.915 6.912 2.319-2.33-3.422-3.423c-1.882-1.883-3.452-3.423-3.49-3.423s-0.575 0.51-1.195 1.132zM6.625 22.797c-0.523 0.539-0.562 0.536-1.229-0.119-0.664-0.651-0.667-0.684-0.139-1.228l0.414-0.427 1.366 1.349-0.412 0.425z" />

Но когда я использую: 

<i style="font-size:25px;" class="icon ion-valet icon-accessory"></i>

Изображение значка не отображается.

Я думаю, что часть проблемы может быть связана с тем, что icomoon создает шрифты символов, которые каким-то образом должны быть преобразованы в шрифты на основе глифов (именно это использует ionicons).

...