Mindful Web Marko/Vue Icon Components

Icon components for Mindful Web websites.

Install

Add @mindful-web/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 '@mindful-web/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