Gtalk.kz

В этой статье я покажу как просто добавить svg иконки на сайт, написанном на ангуляре (как пример).

Что необходимо:

– grunt/gulp для автоматизации;

– svg иконки.

Мы будем собирать из иконок svg спрайт, который необходимо добавить на страницу, а в нужных местах будем использовать для вставки иконки. Подробнее о способе читайте тут.

Почему svg лучше иконочных шрифтов читайте предыдущую статью.

Для создания спрайта используем плагин «svgstore».

Вот настройки для grunt:

svgstore: {
  options: {
    prefix: 'svg-', // добавляем префикс к id = префикс + название файла / <g id="svg-myicon">
    svg: {
      style: 'display: none;' // по умолчанию скрываем наш спрайт
    }
  },
  default: {
    files: {
      '/here/our/sprite-svg.svg': ['app/images/svg-icon/*.svg'] // название спрайта и путь к нему : [путь откуда брать svg иконки для спрайта]
    }
  }
}

Указываем папку откуда собирать иконки и название полученного спрайта.

Далее необходимо добавить спрайт на страницу.

В ангуляре это можно сделать так:

<div ng-include src="'/path/to/our/sprite-svg.svg'"></div>

Что использовать иконку необходимо писать конструкцию типа:

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

Но благодаря директивам в ангуляре мы можем это писать удобнее и проще:

<icon label="myicon" width="20px" height="20px"></icon>

Вот пример как это можно реализовать через директиву:

/**
 * Directive for using svg icons
 *
 * @param {number} width (default: 20px) use own width, example: <icon label="bin" width="50px"></icon>
 * @param {number} height (default: 20px) use own height, example: <icon label="bin" height="50px"></icon>
 * @param {String} label (required) name for icon (name of svg file in folder 'images/svg-icon/')
 * @param {String} fill (default: currentColor) icon's color
 *
 */
(function() {
  angular
    .module('myApp')
    .directive('wxIcon', wxIcon);

  function wxIcon() {
    var directive = {
      restrict: 'E',
      replace: true,
      scope: {
        label: '@',
        width: '@',
        height: '@',
        fill: '@'
      },
      link: IconLink,
      template: '<svg class="svg-icon svg-icon--{{ label }}"><use ng-attr-width="{{ iconWidth }}" ng-attr-fill="{{ iconFill }}" ng-attr-height="{{ iconHeight }}" xlink:href="{{ link }}" /></svg>'
    };

    function IconLink(scope) {
      var SIZE = '20px';
      var COLOR = 'currentColor';

      scope.link = '#svg-' + scope.label;
      scope.iconWidth = (scope.width) ? scope.width : SIZE;
      scope.iconHeight = (scope.height) ? scope.height : SIZE;
      scope.iconFill = (scope.fill) ? scope.fill : COLOR;
    }

    return directive;
  }
})();

И используем на странице.

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

Не забудьте стили добавить:

.svg-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.svg-icon--myicon {
  // здесь стили для конкретной иконки
}

Вот так не сложно можно добавить вектора на свой сайт. Думаю пользователи скажут вам спасибо.

Нагенерировать себе бесплатных иконок можно на http://icomoon.io/

Надеюсь полезно было. Если есть варианты улучшить пишите в комментариях .