Socket
Socket
Sign inDemoInstall

@parameter1/base-cms-marko-web-icons

Package Overview
Dependencies
0
Maintainers
3
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @parameter1/base-cms-marko-web-icons

Vue/Marko icon components for BaseCMS websites


Version published
Weekly downloads
1.1K
increased by51.08%
Maintainers
3
Install size
350 kB
Created
Weekly downloads
 

Readme

Source

BaseCMS Marko/Vue Icon Components

Icon components for BaseCMS websites.

Install

Add @parameter1/base-cms-marko-web-icons as a dependency to your website project.

Usage

Icons can be used on the server (as a Marko component) or the browser (as a Vue component).

On The Server

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

In The Browser

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

Importing Styles (SASS/SCSS)

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.

Development

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.

Icon Sources

The icons used in this library are sourced from:

  • Octicons
  • Material
  • Simple Icons

FAQs

Last updated on 18 Sep 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc