Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
open-iconic
Advanced tools
Readme
We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt
attribute).
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. Tip: To make your icons easily style able, we suggest adding a general class to the <svg>
tag and a unique class name for each different icon in the <use>
tag.
<svg class="icon">
<use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
Sizing icons only needs basic CSS. All the icons are in a square format, so just set the <svg>
tag with equal width and height dimensions.
.icon {
width: 16px;
height: 16px;
}
Coloring icons is even easier. All you need to do is set the fill
rule on the <use>
tag.
.icon-account-login {
fill: #f00;
}
To learn more about SVG Sprites, read Chris Coyier's guide.
You can find our Bootstrap stylesheets in font/css/open-iconic-bootstrap.{css, less, scss, styl}
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
You can find our Foundation stylesheets in font/css/open-iconic-foundation.{css, less, scss, styl}
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
You can find our default stylesheets in font/css/open-iconic.{css, less, scss, styl}
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
All code (including SVG markup) is under the MIT License.
All fonts are under the SIL Licensed.
FAQs
An open source icon set with marks in SVG, sprite, webfont and raster format
The npm package open-iconic receives a total of 13,533 weekly downloads. As such, open-iconic popularity was classified as popular.
We found that open-iconic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.