https://github.com/apostrophecms/vue-material-design-icons

https://github.com/apostrophecms/vue-material-design-icons

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/apostrophecms/vue-material-design-icons
• Owner: apostrophecms
• Created: 2024-03-07T17:13:08.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-07-29T16:34:39.000Z (5 months ago)
• Last Synced: 2024-12-19T18:15:28.297Z (15 days ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


  
Vue Material Design Icons

  


    

      

    

    

      

    

  



A fork of [`vue-material-design-icons`](https://github.com/robcresswell/vue-material-design-icons) to maintain consistent icons naming for ApostropheCMS users.

## Installation

To install the module, use the command line to run this command in an Apostrophe project's root directory:

```sh

npm install @apostrophecms/vue-material-design-icons

```

See how to register and use icons from this library in your [Apostrophe project here](https://v3.docs.apostrophecms.org/reference/module-api/module-overview.html#icons).

 They also can be used in you vue components directly:

   ```javascript

   import CheckIcon from '@apostrophecms/vue-material-design-icons/Check.vue';

   components: {

     CheckIcon;

   }

   ```

Then use it in your template code!

   ```html

   

   ```

**Optional** Add the included stylesheet. This few lines of CSS will cause

the icons to scale with any surrounding text, which can be helpful when you

primarily style with CSS. Note that if you intend to handle sizing with the

`size` prop, you probably don't want to use this as it may conflict.

```javascript

import '@apostrophecms/vue-material-design-icons/styles.css';

```

## Props

- `title` - This changes the hover tooltip as well as the title shown to screen

  readers. For accessibility purposes, if a `title` is not provided, then the

  icon is hidden from screen readers. This is to force developers to use

  meaningful titles for their icon usage.

  Example:

  ```html

  

  ```

- `fillColor` - This property allows you to set the fill colour of an icon via

  JS instead of requiring CSS changes. Note that any CSS values, such as

  `fill: currentColor;` provided by the optional CSS file, may override colours

  set with this prop.

  Example:

  ```html

  

  ```

- `size` - This property overrides the `width` and `height` attributes on the

  SVG. The default is `24`.

  Example:

  ```html

  

  ```

## Credits

[Rob Cresswell  / robcresswell](https://github.com/robcresswell "robcresswell GitHub profile") for

the [Vue Material Design Icons](https://github.com/robcresswell/vue-material-design-icons 'Vue Material Design Icons Github page')

project. This library has been forked on.