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.
@heroku/ember-malibu-icon
Advanced tools
Readme
This Ember addon injects the Malibu svg sprite into your Ember application and provides a helper to insert icons into your templates. You can explore how this helper works in this addon's demo app and documentation.
Note that it will be helpful if you also use Purple 3 for styling
ember install --save @heroku/ember-malibu-icon
By default this addon will inject the latest
version of Malibu. Consumers can configure this in their application's config/environment.js
file
ENV['ember-malibu-icon'] = {
malibuVersion: '1.3.0'
}
Ember Malibu Icon also comes with a bunch of handy Ember Template Lint rules to help remind you to declare accessibility options when possible.
To use these lint rules in your app, add the following to your .template-lintrc.js
file:
module.exports = {
extends: [
'recommended',
'@heroku/ember-malibu-icon:recommended'
],
plugins: [
require('@heroku/ember-malibu-icon/lib/ember-template-lint-plugin')
]
};
The documentation for each rule can be found in the docs/rules directory folder of this project.
Accessibility When rendering MalibuIcon
, you must declare the icon as either:
@title
argument. This will read the text to the screenreader instead of being announced as "Image".aria-hidden="true"
to the component. This will hide the icon from assistive technology. This should only be used for icons that don't convey additional meaning and are being used for aesthetic/design reasons.Use this when when you want text to be announced to the screenreader. This is most common when you have icons that are used for buttons or links but lack text rendered next to the icon to describe it.
<MalibuIcon @title="Add Buildpack {{buildpackName}}" @size="28" @iconClass="gradient-dark-gray" @name="app-28" />
For example:
Given this screenshot, note the pencil icon. There is no text next to it to describe its intended purpose to the screenreader (in this case, "Edit"). @title="Edit {{domain}}"
would be an improvement in this scenario.
Use this when the icon does not convey additional meaning. There should be visual text accompanying the icon. Never use this when only the icon is rendered.
In this example, the GitHub logo is "decorative" because it does not convey additional meaning not already presented to the user via the "GitHub" text next to it.
<MalibuIcon @size="28" @iconClass="gradient-dark-gray" @name="app-28" aria-hidden="true" />
import { malibuIcon } from '@heroku/ember-malibu-icon/helpers/malibu-icon';
malibuIcon({
name: 'app-16',
size: 16,
iconClass: 'v-mid gradient-purple',
title='Optional Title'
})
git clone https://github.com/heroku/ember-malibu-icon
cd ember-malibu-icon
yarn
ember serve
yarn test
(Runs ember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.
This library does its best to follow the principles of Semantic Versioning. Every effort should be made to ensure all non-major versions are released in a backwards compatible way.
Once you are ready to make a new release follow these steps:
package.json
Publish your new version to npm with the command npm publish
🎉
Note that you must have publish access to the @heroku npm organization to successfully publish
FAQs
Ember Malibu Icons
The npm package @heroku/ember-malibu-icon receives a total of 160 weekly downloads. As such, @heroku/ember-malibu-icon popularity was classified as not popular.
We found that @heroku/ember-malibu-icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 151 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.