Code Monkey home page Code Monkey logo

mdue's Introduction

mdue

npm version types license

Material Design Icons for Vue 3. This library has over 5,400+ icons thanks to the amazing people at Material Design Icons. The icons were generated as Vue components using their library @mdi/util.

Features

  • SVG based icons.
  • Supports Vue 3.
  • Treeshaking supported.
  • Supports typescript.
  • Stylable using CSS (inherits color and font size).

Installation

$ npm install mdue --save
# or
$ yarn add mdue

Example

Using the icons from mdue is very easy. Just import the icons into your app and use them. Only the icons that you use will be bundled with the app.

<template>
  <ab-testing></ab-testing>
</template>

<script>
  import { AbTesting } from 'mdue';

  export default {
    name: 'App',
    components: {
      AbTesting,
    },
  };
</script>

A more full-fledged example in the examples directory. You may clone the repo and try the icons out.

Contributing

If you want to contribute to this project, you may easily create issues and send PRs. Please take note that your code contributions will be applicable under MIT license unless specified otherwise.

mdue's People

Contributors

pepsighan avatar yukioru avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mdue's Issues

Size color

How can i change color and size of any icon?

Dependency issue in v0.1.3

Using v0.1.3 in my Vue 3 app, when I execute npm run serve I receive the following error:

ERROR  Failed to compile with 1 errors                                                                                                                           

This dependency was not found:

* mdue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/AppTopbar.vue?vue&type=script&lang=js

To install it, you can run: npm install --save mdue

With v0.1.2 everything works fine.

Video component name

how is the video icon component called?
I've tried:

import { Video } from 'mdue';

but then if I use it in the template as <video> that is already an html tag
the alias for that icon is videocam, but <videocam> and <video-cam> tags doesn't seem to work.
error The "Video" component has been registered but not used vue/no-unused-components

am I missing something here?

EDIT:

oh, silly me.. upper case <Video> works fine, I thought that was invalid.. that CamelCase was supposed to be converted to lower case with hyphens on before each uppercasing... I think Iread that somewhere in the vue docs.. aynway, it works

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.