https://github.com/gggritso/gulp-angular-inline-svg
Combines SVG files into an Angular constant
https://github.com/gggritso/gulp-angular-inline-svg
angular gulp svg
Last synced: 5 months ago
JSON representation
Combines SVG files into an Angular constant
- Host: GitHub
- URL: https://github.com/gggritso/gulp-angular-inline-svg
- Owner: gggritso
- Created: 2017-06-08T14:15:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-28T18:28:21.000Z (over 8 years ago)
- Last Synced: 2025-03-23T02:47:26.000Z (about 1 year ago)
- Topics: angular, gulp, svg
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gulp-angular-inline-svg
You:
- have SVG files you’d like to use
- are using Angular 1.x
- don’t want to use sprites
We:
- provide a Gulp task that concatenates your icons into an Angular constant
You:
- inject the constant into your components (or create a component wrapper)
- drop the SVG into your markup using `ng-bind-html` or something similar
- use CSS to size and style your SVG files in markup
- celebrate
## Installation
```
npm install gulp-angular-inline-svg
```
## Gulp Example
```
var gulp = require( 'gulp' );
var icons = require( 'gulp-angular-inline-svg' );
gulp.task( 'icons', function() {
gulp.src( './icons/*.svg' )
.pipe( icons({
module: 'myApp',
}) )
.pipe( gulp.dest( './' ) );
});
```
## Options
The task `icons` takes in an options object like so `.pipe( icons( options ) )`. The available options are:
- `module` the name of the Angular module that goes into the result file
- `constant` the name of the Angular constant that goes into the result file
- `file` the result filename
- `optimize` whether to run the files through SVGO to optimize the markup
## Usage Recommendation
The best way to use this is through a component like this:
```
angular
.module( 'myApp' )
.component( 'svg-icon', {
template: '{{ $ctrl.markup }}',
controller: mctIconController,
bindings: { name: '@' },
});
function iconController( ICONS, $sce ) {
this.markup = $sce.trustAsHtml( ICONS[ this.name] );
}
```
which you can use in a page like so:
```
```
## Under-The-Hood
A directory like this:
```
icons/
├── clock.svg
└── shopper.svg
```
With this gulp file:
```
var gulp = require( 'gulp' );
var icons = require( 'gulp-angular-inline-svg' );
gulp.task( 'icons', function() {
gulp.src( './icons/*.svg' )
.pipe( icons({
module: 'myApp',
constant: 'ICNS',
optimize: true,
file: 'icns.js',
}) )
.pipe( gulp.dest( './' ) );
});
```
Will create a file called `icns.js` that looks like this:
```
angular
.module( 'myApp' )
.constant( 'ICNS', {
clock: '