@mojocss/material-symbols

1.0.0 • Public • Published

Material Symbols Capsule for Mojo CSS

Integrate Google Material Symbols effortlessly into your Mojo CSS projects.

Usage

NPM

  1. Install the capsule package via npm:
npm install @mojocss/material-symbols
  1. Import the capsuleExample function from the installed package:
import materialSymbols from "@mojocss/material-symbols";
  1. Add the capsule to your Mojo config:
mojo({
  // Mojo CSS Config
  capsules: [materialSymbols],
});

Alternatively, you can configure specific options:

mojo({
  // Mojo CSS Config
  capsules: [
    {
      capsule: materialSymbols,
      options: {
        type: ["Outlined","Rounded","Sharp"], // Array of icon styles | Default ["Outlined"]
        fill: "both", // true, false, "both" | Default "both"
        weight: 400, // 100...700 | Default 400
        grade: 0, // -25...200 | Default 0
        size: 24, // 20...48 | Default 48
      },
    },
  ],
});

CDN

<script src="https://unpkg.com/@mojocss/material-symbols"></script>

and then

mojo({
  // Mojo CSS Config
  capsules: [materialSymbols],
});

Usage

For outlined use:

<span class="material-symbols-outlined">
home
</span>

For rounded use:

<span class="material-symbols-rounded">
home
</span>

For sharp use:

<span class="material-symbols-sharp">
home
</span>

When the fill option is set to "both", you can use the symbols-filled class to fill the icon:

<span class="material-symbols-outlined symbols-filled">
home
</span>

Related Resources

Package Sidebar

Install

npm i @mojocss/material-symbols

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

6.58 kB

Total Files

6

Last publish

Collaborators

  • mojocss