@Genri_Rus

Как выводить спрайт svg в зависимости от data элемента на странице?

Вот пример:

$(function() {
    
    var icon = [
        {'menu-icon' : "<svg viewBox=\"0 0 42 42\">\
        <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"white\" stroke-width=\"2\"/>\
        <g class=\"change-color\">\
            <circle cx=\"19.5\" cy=\"10.5\" r=\"2.5\" fill=\"currentColor\"/>\
            <circle cx=\"19.5\" cy=\"19.5\" r=\"2.5\" fill=\"currentColor\"/>\
            <circle cx=\"19.5\" cy=\"28.5\" r=\"2.5\" fill=\"currentColor\"/>\
        </g>\
<\/svg>"}
]
        for (let i in icon) { 
            
        }
});


Допустим на странице есть

<div class="icon-m" data-icon="menu-icon"></div>

Если есть такой data-icon, то выводить svg в данный элемент

Есть мысли, как это можно реализовать ?
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Люблю Финский металкор
Например так

На-лету вставлять иконки через Js идея такая себе.
Во-первых: пользователю будет видно этот процесс.
Во-вторых: инлайновые свг иконки - плохо, это бесполезные, лишние элементы в DOM дереве, лучше уж использовать иконки фоном.

UPD. В моём примере есть косяк связанный с padding у кнопки, в определенных случаях это не удобно. Но это легко решается. Вынесением иконки в отдельный элемент, в span например. Переделывать мне лень, я лучше спать пойду.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Итак, символьный спрайт - твой случай
В коде html будет:
<svg><use/ xlink:href='path/to/sprite.svg#icon-name'><svg>

В коде спрайта нужны символы, которые подставляются по id.
Вот пример куска спрайта, просто чтоб ты понял как это работает
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="none" viewBox="0 0 18 18" id="archive" xmlns="http://www.w3.org/2000/svg"><path d="M9 0v10.42m0 0L6.143 7.676M9 10.42l2.857-2.742M6 5H4.5L1 12m0 0v5h16v-5M1 12h4a1 1 0 011 1 1 1 0 001 1h4a1 1 0 001-1 1 1 0 011-1h4m0 0l-3.5-7H12"/></symbol>
...

Ну и вместо use подставляется разметка символа, связанная по id.
Так ты сможешь контролировать svg и через css и через js. И все они будут лежать в одном спрайте.

Ну и естественно, процесс компиляции иконок в спрайт - я юзаю через gulp.
const gulp = require('gulp'),
cheerio = require('gulp-cheerio'),
svgmin = require('gulp-svgmin'),
replace = require('gulp-replace'),
util = require('gulp-util'),
notify = require('gulp-notify'),
svgSprite = require('gulp-svg-sprite'),
path = require('path');
  let dest = path.join('src', 'assets', 'icons');
  let svgConfig = {
    mode: {
      symbol:{
        sprite: "../sprite.svg"
      }
    }
  };
  gulp.task('sprite', function() {
    gulp.src("**/*.svg", {cwd: path.join(dest, 'exported')})
      .pipe(svgSprite(svgConfig))
      .pipe(cheerio({
        run: function ($) {
          $('[stroke]').removeAttr('stroke');
          $('[viewBox]').attr('viewBox', '0 0 18 18');
          return
        },
        parserOptions: {xmlMode: true}
      }))
      .pipe(replace('&gt;', '>'))
      
      .on('error', function(err) {
        util.log(err);
      })
      .on('error', notify.onError('sprite compiling error!'))
      .pipe(gulp.dest(dest))
  });

path src и dest а также поиконочную обработку через cheerio уже подгоняешь под себя
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы