svg-sprite 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
svg-sprite 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票

软件简介

svg-sprite 是一个低层次的 Node.js 模块,它可以将一堆 SVG 文件进行优化,然后将它们烤成几种类型的 SVG sprites ,并包含合适样式表的资源(例如 CSS, Sass, LESS, Stylus, etc.)

使用模式:

// Create spriter instance (see below for `config` examples)
var spriter       = new SVGSpriter(config);
// Add SVG source files — the manual way ...
spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', {encoding: 'utf-8'}));
spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encoding: 'utf-8'}));
    /* ... */
// Compile the sprite
spriter.compile(function(error, result) {
    /* ... Write `result` files to disk or do whatever with them ... */
});


展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/10/25 17:54

svg-sprite-loader ( svg-icon) 使用

svg-sprite-loader 可以多个svg图标合并. 使用时只需根据合并的symbol的id即可. <svg class="svg-icon" aria-hidden="true" v-on="$listeners"> <use xlink:href="symbol的id" /> </svg> // 项目使用Vue CLI 搭建 1. 首先 svg-sprite-loader npm install -D svg-sprite-loader 2. 更改vue.config.js webpack的配置 chai...

0
0
发表了博客
2018/07/04 17:14

SVG Sprite 使用Symbol元素制作ICON

介绍 SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方式进行制作ICON和让ICON实现页面显现。 关于CSS Sprite 精灵图 关于字体图标的三两事 SVG有什么优势和特点? SVG方法与这两种相...

0
0
发表了博客
2018/09/08 11:50

[Vuejs] svg-sprite-loader实现加载svg自定义组件

1、安装 svg-sprite-loader npm install svg-sprite-loader -D 或者 npm install svg-sprite-loader --save-dev 2、将所有svg图片放到assets/svg下,以此为例,修改文件 build/webpack.base.conf.js 找到代码: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000...

0
0
发表于大前端专区
2019/01/21 15:29

VUE-cli3使用 svg-sprite-loader

1、npm install svg-sprite-loader --save-dev 2、在Vue.config.js加入处理 svg 的 loader并删除默认配置中处理svg 3、新建icons文件夹,icons/svg存放svg,icons/index配置自动导入代码 import Vue from 'vue' ......

0
0
发表了博客
2019/04/03 14:28

@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 [TOC] online github Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 https://www.iconfont.cn 的图标库为你所用,加快开发速度. Vue 脚手架升级 3.0,项目也随之升级。 运行 装包 yarn or npm i 运行 npm run serve 使用 使用 svg-symbol 引入图标 svg 文件会导...

0
0
发表了博客
2019/03/29 17:43

vue-cli3 使用 svg-sprite-loader 的坑

chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg, //const svgRule = config.module.rule('svg') //svgRule.uses.clear() config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include .add(resolve('src/icons'...

0
0
发表了博客
2016/12/16 14:12

compass sprite

1、compass init 初始化一个compass项目,并创建一个images文件夹用来存放合成的sprite图 2、将切好的小图放到images文件夹中 3、在sass文件夹中新建一个test.scss的文件并写入 @import "test/*.png"; //导入小图片 @include all-test-sprites; // 这是 compass 定义好的 mixin,一次全部生成 icons 这个文件夹...

0
0
发表了博客
2015/01/31 15:22

Sprite Mode设置

Sprite Mode设置成Multiple 消失

0
0
发表了博客
2013/10/11 14:44

lua sprite使用

在网上看了一些例子,可能是版本的问题运行时出错,折腾了一下修改一部份代码,发上来做个记录以便日后做参考: collectgarbage("setpause", 100) collectgarbage("setstepmul", 5000) local frameWidth = 105 local frameHeight = 95 加载到缓存中 CTexture2D *pTexture = CCTextureCache::sharedTextureCache()->addIm...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
3 收藏
分享
返回顶部
顶部