Socket
Socket
Sign inDemoInstall

@ausbom/icon

Package Overview
Dependencies
Maintainers
5
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ausbom/icon - npm Package Compare versions

Comparing version 0.16.2 to 0.16.3

6

package.json
{
"name": "@ausbom/icon",
"version": "0.16.2",
"version": "0.16.3",
"description": "The icon component provides a refined set of functional icons to use in services and products. The icons are broken into three categories to help users navigate the service, identify important information and understand the forecast story.",

@@ -40,3 +40,3 @@ "keywords": [],

"dependencies": {
"@ausbom/styles": "^0.9.2"
"@ausbom/styles": "^0.10.0"
},

@@ -47,3 +47,3 @@ "peerDependencies": {

},
"gitHead": "0bf333c15b131c52eb8c63b1ee2f89ffe01c7ff4"
"gitHead": "d87405ddb170ded80d71979b6f9e5d628ba07dc5"
}

@@ -15,7 +15,8 @@ # @ausbom/icon

```
### Available system icons
There a number of system icons available as React components. You can find them in `@ausbom/icon/lib/icons/system`.
There are a number of system icons available as React components. You'll find them in `@ausbom/icon/lib/icons/system`.
Each of these icon components can take a primaryColor and secondaryColor. While it's recommended to use them with the `SystemIcon` component, it is possible to just render them by themselves
Each of these icon components can take a `primaryColor` and `secondaryColor`. While it's recommended to use them with the `SystemIcon` component, it is possible to render them by themselves.

@@ -40,9 +41,7 @@ Example:

Each icon provided by the design system is intended to be used at a certain size, ensure that you are using an icon that is designed to be displayed at the size you need.
Each icon provided by the design system is intended to be used at a certain size. Make sure you're using an icon that is designed to be displayed at the size you need.
### Bring your own icons
If your project needs an icon that isn't provided in the design system, you can still use `SystemIcon` because the `icon` prop can take any React component that renders SVG
If your project needs an icon that isn't provided in the design system, you can still use `SystemIcon`. The `icon` property can take any React component that renders SVG.
In order for your icon to
Example:

@@ -71,7 +70,7 @@

### Colorising provided system icons with CSS
### Colourising system icons
Classes (`.__primary` and `.__secondary`) are applied to elements inside the provided system icon SVGs so that dual-colored icons can be colorised by css if needed. This can be useful for things like hover states.
Elements inside system icon SVG's use the classes `.__primary` and `.__secondary`. This allows dual-coloured icons to be colourised by CSS if needed. This can be useful for things like hover states.
For dual-colored icon components that you provide yourself, you'll need to add these classes to the correct elements.
Add these classes to the correct elements for any dual-coloured icon components that you provide.

@@ -78,0 +77,0 @@ ```scss

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc