svg-sprite

svg-sprite-loader with Angular 8 custom webpack config

由 佐手、 提交于 2021-02-10 20:31:46
问题 I am trying to use svg-sprite-loader package (to create a svg sprite) with my Angular 8 project using custom webpack config. I am using below custom config: const SpriteLoaderPlugin = require('svg-sprite-loader/plugin'); module.exports = { module: { rules: [ { test: /\.(svg)$/, loader: 'svg-sprite-loader', options: { spriteFilename: './src/assets/svg/combinedicons.svg', runtimeCompat: true, }, }, ], }, plugins: [ new SpriteLoaderPlugin({ plainSprite: true, }), ], }; I am getting following

svg-sprite-loader with Angular 8 custom webpack config

由 谁说胖子不能爱 提交于 2021-02-10 20:29:38
问题 I am trying to use svg-sprite-loader package (to create a svg sprite) with my Angular 8 project using custom webpack config. I am using below custom config: const SpriteLoaderPlugin = require('svg-sprite-loader/plugin'); module.exports = { module: { rules: [ { test: /\.(svg)$/, loader: 'svg-sprite-loader', options: { spriteFilename: './src/assets/svg/combinedicons.svg', runtimeCompat: true, }, }, ], }, plugins: [ new SpriteLoaderPlugin({ plainSprite: true, }), ], }; I am getting following

SVG <use xlink:href> from a CDN

由 那年仲夏 提交于 2021-02-07 13:37:49
问题 I am using the <use xlink:href> to reference my svg file. It works fine on my local but throws an error (CORS) when I reference it from a CDN. It looks as though the xlink:href doesn't allow the CORS request but I am wondering if there is any solution? On the other hand, I have heard that this sprite technique is deprecated on SVG2 . So what is the best solution to use sprite SVG file for now that works on all different browsers including mobile browsers. 回答1: The simplest cross-browser

SVG <use xlink:href> from a CDN

由 孤人 提交于 2021-02-07 13:36:07
问题 I am using the <use xlink:href> to reference my svg file. It works fine on my local but throws an error (CORS) when I reference it from a CDN. It looks as though the xlink:href doesn't allow the CORS request but I am wondering if there is any solution? On the other hand, I have heard that this sprite technique is deprecated on SVG2 . So what is the best solution to use sprite SVG file for now that works on all different browsers including mobile browsers. 回答1: The simplest cross-browser

webpack 4 gives background: url([object Module]) as bg image

由 霸气de小男生 提交于 2020-12-08 06:07:27
问题 I'm having issues with setting up web-pack 4 and svg-sprite-loader to render svg icons as background images. I was following these instructions from official docs for svg-sprite-loader (https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode). I have successfully managed to create sprite.svg file in my dist folder and use it as reference for my use tags inside of html. However, i was also trying to use svg icons from my src/images/icons folder for a background image

webpack 4 gives background: url([object Module]) as bg image

由 早过忘川 提交于 2020-12-08 06:05:08
问题 I'm having issues with setting up web-pack 4 and svg-sprite-loader to render svg icons as background images. I was following these instructions from official docs for svg-sprite-loader (https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode). I have successfully managed to create sprite.svg file in my dist folder and use it as reference for my use tags inside of html. However, i was also trying to use svg icons from my src/images/icons folder for a background image

又一款开源图标库 CSS.GG，值得一用

由 Deadly 提交于 2020-08-12 11:08:22
嗨，我是 Martin ，也叫老王，今天推荐一款好用的开源图标库。 我们平常找图标往往会去 iconfont 但是今天，我们看了 Martin 的文章之后，就会有一个新的选择—— CSS.GG Github https://github.com/astrit/css.gg star 5751 fork 214 Watch 86 项目介绍 700 + 纯 CSS , SVG & Figma UI Icons 可用在 SVG 精灵图, styled-components , NPM & API 使用方法 通过 npm or yarn 安装最新版本 npm i css.gg yarn add css.gg 使用该包 该包，包含以下目录和文件: Path What it is /css individual *.css icons /scss individual *.scss icons /svg individual *.svg icons /tsx individual *.tsx icons styled-components /all.css all icons compressed in a single file /all.d.ts styled-components /all.fig local figma file same as https://css.gg/fig

svg 使用中的疑惑点

由 蓝咒 提交于 2020-08-11 05:23:47
svg， g ，defs，symbol 都是容器元素,使用起来给人许多疑惑 svg-spirite-loader在页面生成的svg标签有什么特点？ svg标签里面的symbol有什么用？ 这些标签能够随意相互包裹么? 不能任意嵌套 经过实验发现： svg>g>svg>g可以任意嵌套 defs symbol嵌套不会展示，因为这两个容器本来就不会展示 <svg xmlns="http://www.w3.org/2000/svg" style="fill: #cccccc" viewBox="0 0 8 8" width="16" height="16"> <g id="user-icon"> <g> <g> <svg> <path id="user-icon_Rectangle-2" class="st0" d="M4,0L4,0c2.21,0,4,1.79,4,4l0,0c0,2.21-1.79,4-4,4l0,0C1.79,8,0,6.21,0,4l0,0 C0,1.79,1.79,0,4,0z"></path> <path id="user-icon_Combined-Shape-Copy" class="st1" d="M4.23,2.94l0.52,1.59l1-0.85C5.7,3.61,5.67,3.52,5.67,3.43C5.67,3.19,5.85,3,6.08,3

15个可以带给你启发的 SVG 动画示例

由 [亡魂溺海] 提交于 2020-05-06 20:24:04
和其他图像格式相比，SVG（可缩放矢量图形）具有许多优势。首先，SVG 具有可扩展性，因此可以适应任何屏幕尺寸而不会造成质量损失。然后，浏览器只需加载更少的资源，可以更快地加载。而且，可以像使用常规 HTML 元素一样使用 CSS 对其进行编辑。除了用于静态图像之外，您还可以使用 SVG 创建超赞的动画。在本文中，我们收集了15个 SVG 动画示例，以启发您在自己的 Web 项目中使用它们。 1. Become a Traveler Today 2. SVG Loader Animations 3. Project Deadline Is Coming 4. SVG Text Animation Using Stroke Offset Method 5. Sketch Photo Animation 6. Beating Heart Animation 7. Pointless Rider 8. Sovog 404 Page 9. List Expand SVG Animation 10. SVG Animation with Sliders 11. Wanderlust 12. Back to the Future 13. Isometric Alphabet Animation 14. SVG Sprite Animation 15. Planetary Resonance

svg的两个坑

由 本秂侑毒 提交于 2020-02-28 09:28:41
1. WebStorm 按两下空格输入 soft wrap 进行换行 2. 第一个坑: svg 中的 fill 属性处理 svg 里面如果有 fill="",就会有颜色，可以手动去除,但是如果有很多个 svg 那么一个个去很麻烦 用 svgo-loader 解决这个问题，在 vue.config.js 中配置 config.module .use('svgo-loader').loader('svgo-loader') .tap(options=>({ ...options, plugins:[{ removeAttrs:{attrs:'fill'} }] }) ) .end() 安装方法 yarn add svgo-loader -D 3. 碰到问题安装包和 node 版本不匹配 The engine "node" is incompatible with this module. Expected version "^8.16.0 || ^10.6.0 || >=11.0.0". Got "8.12.0" 解决办法用 nvm 安装 10 版本的,升级办法参考: https://dev.to/peterwitham/install-and-update-nodejs-on-the-mac-with-nvm-1m9j nvm install 10 4. 提交修改 点 Version
订阅 svg-sprite