在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):Hiswe/gulp-svg-symbols开源软件地址(OpenSource Url):https://github.com/Hiswe/gulp-svg-symbols开源编程语言(OpenSource Language):JavaScript 62.5%开源软件介绍(OpenSource Introduction):gulp-svg-symbolsgulp-svg-symbols is a minimal plugin for gulp. Install
ExampleIn your gulpfile.js: const gulp = require('gulp')
const svgSymbols = require('gulp-svg-symbols')
gulp.task(`sprites`, function() {
return gulp
.src(`assets/svg/*.svg`)
.pipe(svgSymbols())
.pipe(gulp.dest(`assets`))
}) In your HTML, you first have to reference the SVG <svg role="img" class="github">
<use xlink:href="#github"></use>
</svg>
OptionsYou can override the default options by passing an object as an argument to Basicsid and classtype: Text templates for generating symbols id & icon class fontSizetype: This option lets you define a base font. titletype: Specify whether or not you want to add a missing title: `%f icon` svgAttrstype: Specify attributes for the {
class: `svg-icon-lib`,
'aria-hidden': `true`,
style: `position: absolute;`,
'data-enabled': true,
} output: <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-lib" aria-hidden="true" style="position: absolute;" data-enabled> notes:
slugtype: In order to have nice ids in the template and to keep the gulp task quite simple, gulp-svg-symbols use speakingurl. You can pass a speakingurl's config here: gulp.src(`*.svg`).pipe(
svgSymbols({
slug: {
separator: `_`,
},
})
) You can also provide a custom function which should return a gulp.src(`*.svg`).pipe(
svgSymbols({
slug: function(name) {
return name.replace(/\s/g, `-`)
},
})
) Or if you want to use gulp-rename: gulp
.src(`*.svg`)
.pipe(rename(/* gulp rename options*/))
.pipe(
svgSymbols({
slug: name => name,
})
) templatestype: gulp-svg-symbols comes with some default templates. You can control which file are generated by specifying only the templates to keep: templates: [`default-svg`] will output only the SVG file. Here is the list of all provided templates:
More details about the build-in templates can be found in the TEMPLATES.md file CSS generationYou can deactivate CSS output by removing the CSS template from the template array. warndefault: Disable plugin warn messages (like: missing viewBox & depreciation warnings). AdvancedtemplatesSpecify your own templates by providing an absolute path: templates: [
path.join(__dirname, `path/to/my/template.less`),
path.join(__dirname, `path/to/another/template.js`),
// You can still access to default templates by providing:
`default-svg`,
`default-css`,
`default-demo`,
]
{
svgAttrs: {/* the same object you can pass in configuration */ },
defs: `string`,
icons: [{
id: `string`,
class: `.string`,
width: `a number as a string with a unit`,
height: `a number as a string with a unit`,
style: `string if exists`,
svg: {
name: `string (svg filename without extension)`,
id: `string`,
width: `number`,
height: `number`,
content: `the svg markup as a string`,
viewBox: `string`,
originalAttributes: {
/* every attributes before processing them */
},
},
}, {/*…*/}, ],
}
transformDataWith the ability to provide custom templates, you also have the ability to configure custom data. transformData: function(svg, defaultData, options) {
/******
svg is same object as the one passed to the templates (see above)
defaultData are the ones needed by default templates
see /lib/get-default-data.js
options are the one you have set in your gulpfile,
minus templates & transformData
*******/
return {
// Return every datas you need
id: defaultData.id,
class: defaultData.class,
width: `${svg.width}em`,
height: `${svg.height}em`
};
} In your templates, svg original data are accessible in Other observations
If you want to include the SVG symbols directly in the DOM (i.e. no external reference) and mask it, a secure way of hiding it could be achieved in this way: .svg-icon-lib {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
} A simple Other stuffRendering caveatsSVG can have rendering issues if:
An example has been made to show all those issues resolved inside the svgContainingIdenticalId.
MigratingSee MIGRATING.md More examplesGo in the examples folder, then Usefull frontend lib
Thanks
Credits
Alternatives |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论