Вот что имеем – скрипт:
$('[data-svg]').not('loaded').each(function (){
var $i = $(this).addClass('loaded');

$.get($i.data('svg'),function (data){
var $svg = $(data).find('svg');

$svg.attr('class', $i.attr('class'));
$i.replaceWith($svg);
}, 'xml');
});

Как работает:
Вставляем вот такой код <div class=city><i class=icon data-svg="img/svg/icons/city.svg"></i>Москва< /div> а на выходе получаем:
<div class=city><svg xmlns="www.w3.org/2000/svg" width=10 height=10 viewBox="0 0 10 10" fill=none class="icon loaded">
<path fill-rule=evenodd clip-rule=evenodd d="M5.02639 9.97839C5.00476 9.97839 4.98072 9.97599 4.95909 9.97118C4.82688 9.93993 4.73313 9.82214 4.73313 9.68512V5.26685H0.314856C0.177837 5.26685 0.0600484 5.1731 0.0287984 5.04089C-0.0024516 4.90868 0.0624522 4.77166 0.182645 4.71156L9.55524 0.05291C9.66822 -0.00237845 9.80524 0.0192562 9.89178 0.108198C9.98072 0.197141 10.0024 0.33416 9.94707 0.444737L5.28841 9.81493C5.24034 9.91589 5.13697 9.97839 5.02639 9.97839ZM1.56245 4.68031H5.02639C5.18745 4.68031 5.31966 4.81253 5.31966 4.97358V8.43752L9.03361 0.966372L1.56245 4.68031Z" fill="#999999"></path>
</svg>Москва</div>

В общем задача:
Скрипт работает через ajax соответственно он работает только на серверах, т.е. если просто открыть html то выдает ошибку "Access to XMLHttpRequest at 'file:///C:/Work/Sites/Dmitry/Samovar/www/img/svg/icons/facebook. svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.". Надо поправить этот скрипт что бы работал без ajax или написать новый.
Скрипт работает вот по этой ссылке semush.bget.ru/sss/samova...

Опубликовано 3 года назад