# gulp-svgcombiner **Repository Path**: mirrors_adobe/gulp-svgcombiner ## Basic Information - **Project Name**: gulp-svgcombiner - **Description**: A gulp plugin for svgcombiner - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-09-24 - **Last Updated**: 2026-03-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # gulp-svgcombiner > A gulp plugin for svgcombiner ## Usage First, install `gulp-svgcombiner` as a development dependency: ```shell npm install --save-dev gulp-svgcombiner ``` Then, add it to your `gulpfile.js`: ### Combine SVGs in two directories If you have a directory structure such as: ``` ├── gulpfile.js └── icons/ └── medium/ | └── S_UICheckboxCheckmark_12_N@1x.svg └── large/ └── S_UICheckboxCheckmark_12_N@1x.svg ``` You could configure `gulp-svgcombiner` as follows: ```js gulp.src('icons/**/*.svg') .pipe(svgcombiner({ processName: function(filePath) { // Add a prefix and extra the icon name from the fileName return 'icon-' + fileName.replace(/S_UI(.*?)_.*/, '$1'); }, processClass: function(filePath) { return 'icon-' + path.dirname(filePath).split(path.sep).pop(); } })) .pipe(gulp.dest('dist/icons/')); ``` The result would be ``` └── dist/ └── icons/ └── CheckboxCheckmark.svg ``` `CheckboxCheckmark.svg` would have the following contents: ```xml ``` Assuming you've embeded this SVG in the page and referenced the symbol with ``: ```
``` You could then use the following CSS to switch between the medium and large icons: ```css /* Hide all icons by default */ .icon-medium, .icon-large { display: none; } /* Show the large icons when in large mode */ .ui-large .icon-large { display: inline; } /* Show the medium icons when in medium mode */ .ui-medium .icon-medium { display: inline; } ``` Or, you could use media queries to switch between icon sets: ```css // Show medium icons by default .icon-medium { display: inline; } .icon-large { display: none; } @media (min-width:480px) { // Show the large icons on small screens .icon-large { display: inline; } .ui-medium .icon-medium { display: none; } } ``` ## API ### svgcombiner([options]) #### options Type: `Object` ##### options.processName(filePath) Type: `function` Default: Strip file extension This function serves two purposes: 1. Normalize naming differences between icons 2. Name your icons For instance, if you have an icon naming convention that includes the size of the icon, your `processName` function should remove the size of the icon from the name, as well as strip the extension and any other irrelevant text. ### Contributing Contributions are welcomed! Read the [Contributing Guide](.github/CONTRIBUTING.md) for more information. ### Licensing This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.