Comments (8)
w0rm
commented on June 18, 2024
Hi, can you please also include svg source of the icon?
from gulp-svgstore.
jmacaluso711
commented on June 18, 2024
Here's the sprite
<svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="icon-portal" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><path d="M12.5 14.5v-2.875M7.5 11.688V14.5l-5.01 1.79C1.297 16.714.5 17.845.5 19.113V21.5h12"/><ellipse cx="9.988" cy="6.5" rx="5" ry="6"/><path d="M14.98 5.963c-.17.02-.32.004-.49.037-1.704.328-2.798-.29-3.735-1.93C10.19 5.148 8.435 6 6.988 6c-.71 0-1.323-.146-1.935-.467"/></g><path stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M15.5 17h8v6.5h-8zM19.5 21.5v-1"/><path fill="#231F20" d="M19.5 18.5c-.553 0-1 .447-1 1 0 .552.447 1 1 1 .552 0 1-.448 1-1 0-.553-.448-1-1-1z"/><path stroke="#231F20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16.5 17v-1c0-1.657 1.343-3 3-3 1.656 0 3 1.343 3 3v1" fill="none"/></symbol><symbol id="icon-search" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><circle cx="8.5" cy="8.5" r="8"/><path stroke-linecap="round" d="M14.156 14.156L23.5 23.5"/></g></symbol><symbol id="icon-social" viewBox="0 0 24 24"><g stroke="#231F20" stroke-miterlimit="10" fill="none"><path d="M8.075 10.213C7.418 8.903 6.065 8 4.5 8c-2.21 0-4 1.79-4 4s1.79 4 4 4c1.566 0 2.918-.902 3.575-2.213M19.5 8.5c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .644.156 1.25.425 1.787M15.925 17.713c-1.327 2.648.598 5.787 3.575 5.787 2.21 0 4-1.79 4-4s-1.79-4-4-4M19.5 8.5c-1.566 0-2.918-.902-3.575-2.213l-7.85 3.926c.27.538.425 1.144.425 1.787 0 .644-.156 1.25-.425 1.787l7.85 3.926c.657-1.31 2.01-2.213 3.575-2.213"/></g></symbol></svg>
from gulp-svgstore.
w0rm
commented on June 18, 2024
@jmacaluso711 you cannot override attributes values with css, you have to remove them from svg.
This may be done manually or automatically in transformSvg callback (there is an example for removing fill attribute in readme)
from gulp-svgstore.
jmacaluso711
commented on June 18, 2024
I removed the fill and stroke attributes now there are no icons showing up
from gulp-svgstore.
w0rm
commented on June 18, 2024
@jmacaluso711 then you have to set them for svg in css, and all paths will inherit them. Check how this is done in test https://github.com/w0rm/gulp-svgstore/blob/master/test/src/inline-svg.html
from gulp-svgstore.
jmacaluso711
commented on June 18, 2024
Thanks for the quick response. So now it works in chrome if i use the following in my stylesheet
svg {
path,
line,
ellipse,
rect,
circle {
stroke: #fff;
}
}
However if I try to target the class of the svg:
.icon-portal {
path,
line,
ellipse,
rect,
circle {
stroke: #fff;
}
}
This is ignored in Chrome. Firefox works perfectly. Wondering if you've heard this before?
from gulp-svgstore.
w0rm
commented on June 18, 2024
It should be just .icon-portal { stroke: #fff } all nested elements will inherit this value.
from gulp-svgstore.
jmacaluso711
commented on June 18, 2024
Thanks very much.. I think that did it
from gulp-svgstore.
Related Issues (20)
- Combine svg's to sprite - apply class attribute to symbols HOT 1
- Incredible "fill" attribute HOT 1
- Name and link for html5boilerplate visuallyhidden class is obsolete in README
- Options for including title and desc tags
- Rendering issues due to <svg> style not being trasferred HOT 3
- css-what dependency is vulnerable to Denial of Service HOT 1
- Fork or pull request for migrate to stack? HOT 2
- Apply class attribute to symbols HOT 1
- "viewBox → viewbox" is bad HOT 5
- <def><style> stops fill: anycolor HOT 3
- defs included outside the symbol HOT 5
- Defs cleanup?? Defs are missing after running svgstore HOT 1
- gulp4 alpha.3 HOT 3
- Styling individual paths through css HOT 1
- Moving away from the Buffer constructor HOT 2
- Content loaded via ajax shows empty icons HOT 3
- UnhandledPromiseRejectionWarning when more than one SVG in the source directory HOT 1
- Problem with globs HOT 2
- Update README to propose automatic fix for `clipPath` issues HOT 1
- No preview files available HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-svgstore.