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.
@parameter1/base-cms-marko-web-icons
Advanced tools
Readme
Icon components for BaseCMS websites.
Add @parameter1/base-cms-marko-web-icons
as a dependency to your website project.
Icons can be used on the server (as a Marko component) or the browser (as a Vue component).
Call the <marko-web-icon>
component within your Marko template. The name
input/attribute is required. For example:
<!-- Your template file -->
<marko-web-icon name="alert" />
See the svg
folder for a complete list of available icons.
Optional input/attributes:
tag
: changes the wrapping HTML element. Default <span>
blockName
: changes the wrapping BEM block class. Default marko-web-icon
modifiers
: additional BEM modifiers (as an array) to apply the icon wrapper. Default []
class
: an additional class name string to apply to the icon wrapper. Default undefined
Import the icon component into your Vue component and then use it within your template. For example:
// Your Vue component
<template>
<icon-alert />
</template>
<script>
import IconAlert from '@parameter1/base-cms-marko-web-icons/browser/alert.vue';
export default {
components: { IconAlert },
// The rest of your component...
}
</script>
See the browser
folder for a complete list of available icons (mirrors the svg
folder).
Optional props:
tag
: changes the wrapping HTML element. Default <span>
blockName
: changes the wrapping BEM block class. Default marko-web-icon
modifiers
: additional BEM modifiers (as an array) to apply the icon wrapper. Default []
className
: an additional class name string to apply to the icon wrapper. Default null
This package comes with baseline SASS variables and styles. To use them, import them into your website's style file:
// Your main website styles file.
// Override any desired variables here...
@import "[path-to-node_modules]/marko-web-icons/scss/icons";
By default, a width/height of 1rem
will be applied to all icons classed with marko-web-icon
(applied by default). In addition, the SVG will be filled with black and a ease transition will be applied. Additional (optional) modifiers include:
md
lg
xl
light
dark
shadow
For example, for a light, extra large icon with drop shadow, you would call the icon as follows:
// In Vue:
<template>
<icon-alert modifiers=["xl", "light", "shadow"] />
</template>
// In Marko:
<marko-web-icon name="alert" modifiers=["xl", "light", "shadow"] />
Finally, any icon not specifically set to light
or dark
that also matches a brand (e.g. facebook
) will have its brand color applied. See the $marko-web-icon-brand-colors
map variable within scss/_variables.scss
for a list of supported brands.
Anytime a new icon svg
file is added (or the wrapping Vue component template changes), run the build.js
file found in the project root. This will generate a new Vue file for the icon.
The icons used in this library are sourced from:
FAQs
Vue/Marko icon components for BaseCMS websites
The npm package @parameter1/base-cms-marko-web-icons receives a total of 984 weekly downloads. As such, @parameter1/base-cms-marko-web-icons popularity was classified as not popular.
We found that @parameter1/base-cms-marko-web-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 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.