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.
grommet-icons
Advanced tools
Readme
Iconography for Grommet and React.js
npm install grommet-icons --save
or
yarn add grommet-icons
import { Facebook } from 'grommet-icons';
<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />
Visit our site for more icons.
Any 24x24px SVG may be converted to an icon using the <Blank>
icon. For example:
If an icon is decorative and does not need to be read out by assisstive technologies, use <Blank />
with default properties. If the icon should be read out by assisstive technologies, apply aria-hidden={undefined}
and an appropriate a11yTitle
to <Blank />
.
import React from 'react';
import { Blank } from 'grommet-icons';
export const MyIcon = (props) => (
<Blank {...props}>
{/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="5" />
</svg>
</Blank>
);
export const MyOtherIcon = (props) => (
<Blank a11yTitle="Descriptive icon name" aria-hidden={undefined} {...props}>
{/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="5" />
</svg>
</Blank>
);
Check out this codesandbox
The theme for the icon supports different colors and sizes. The default definition is:
theme = {
global: {
colors: {
icon: '#666666',
}
},
icon: {
size: {
small: '12px',
medium: '24px',
large: '48px',
xlarge: '96px',
},
extend: undefined,
},
}
You can customize sizing and/or colors by specifying your own theme.
The colors
property allows you to use color names. For
instance: colors: { brand: '#ff0000' }
would allow you to use
<ZoomOut color='brand' />
.
import { ThemeProvider } from 'styled-components';
import { base, deepMerge } from 'grommet-icons';
const theme = deepMerge(base, {
global: {
colors: {
brand: '#ff0000',
},
},
});
return (
<ThemeContext.Provider theme={theme}>
<ZoomOut color="brand" />
</ThemeContext.Provider>
);
To build this library, execute the following commands:
Install NPM modules
$ npm install (or yarn install)
Run pack
$ npm run build
Test and run linters:
$ npm run lint
Generate React icons:
$ npm run generate-icons
FAQs
iconography for grommet apps.
The npm package grommet-icons receives a total of 23,039 weekly downloads. As such, grommet-icons popularity was classified as popular.
We found that grommet-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers 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.