mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-28 10:34:53 +00:00
add support for svg icons #99
This commit is contained in:
Marcos Moura
parent
52d5b5a8c6
commit
8eb08af0cc
5 changed files with 214 additions and 10 deletions
4
docs/src/assets/icon-home.svg
Normal file
4
docs/src/assets/icon-home.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 199 B |
BIN
docs/src/assets/icon-menu.png
Normal file
BIN
docs/src/assets/icon-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 B |
|
|
@ -3,8 +3,9 @@
|
|||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.</p>
|
||||
<p>You can see the full list of icons on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> website. Replace the spaces in the icon name by underscores (for example, <code>arrow back</code> becomes <code>arrow_back</code>)</p>
|
||||
|
||||
<p>You can see the full list of icons on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> website. Replace the spaces in the icon name by underscores (for example, <code>arrow back</code> becomes <code>arrow_back</code>).</p>
|
||||
<p>Alternatively you can use your PNG or SVG icons using the <code>md-src</code> property.</p>
|
||||
|
||||
<p>The following classes can be applied to change the color palette:</p>
|
||||
<ul class="md-body-2">
|
||||
<li><code>md-primary</code></li>
|
||||
|
|
@ -15,12 +16,44 @@
|
|||
|
||||
<div slot="api">
|
||||
<api-table name="md-icon">
|
||||
<p>No options available</p>
|
||||
<md-table slot="classes">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-size-{type}</md-table-cell>
|
||||
<md-table-cell>Change the size of an icon. From 2x to 5x. Example: md-size-3x</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
|
||||
<md-table slot="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Type</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-src</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The src of the image file. Can be SVG icons too!</md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<example-box card-title="Google Font">
|
||||
<div slot="demo">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-primary">menu</md-icon>
|
||||
|
|
@ -38,6 +71,68 @@
|
|||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Sizes">
|
||||
<div slot="demo">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-size-2x md-primary">home</md-icon>
|
||||
<md-icon class="md-size-3x md-accent">home</md-icon>
|
||||
<md-icon class="md-size-4x md-warn">home</md-icon>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-size-2x md-primary">home</md-icon>
|
||||
<md-icon class="md-size-3x md-accent">home</md-icon>
|
||||
<md-icon class="md-size-4x md-warn">home</md-icon>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Images">
|
||||
<div slot="demo">
|
||||
<md-layout :md-gutter="true">
|
||||
<md-layout>
|
||||
<strong class="md-body-2">SVG:</strong>
|
||||
<md-icon md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-2x md-primary" md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-3x md-accent" md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-4x md-warn" md-src="assets/icon-home.svg"></md-icon>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<strong class="md-body-2">PNG:</strong>
|
||||
<md-icon md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-2x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-3x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-4x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-layout :md-gutter="true">
|
||||
<md-layout>
|
||||
<strong class="md-body-2">SVG:</strong>
|
||||
<md-icon md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-2x md-primary" md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-3x md-accent" md-src="assets/icon-home.svg"></md-icon>
|
||||
<md-icon class="md-size-4x md-warn" md-src="assets/icon-home.svg"></md-icon>
|
||||
</md-layout>
|
||||
|
||||
<md-layout>
|
||||
<strong class="md-body-2">PNG:</strong>
|
||||
<md-icon md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-2x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-3x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
<md-icon class="md-size-4x" md-src="assets/icon-menu.png">menu</md-icon>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<md-icon md-theme="light-blue" class="md-primary">home</md-icon>
|
||||
|
|
@ -59,3 +154,10 @@
|
|||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
strong {
|
||||
margin: auto 16px auto 0;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,46 @@
|
|||
|
||||
$icon-size: 24px;
|
||||
|
||||
@mixin icon-size($size: $icon-size) {
|
||||
width: $size;
|
||||
min-width: $size;
|
||||
height: $size;
|
||||
min-height: $size;
|
||||
font-size: $size;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
width: $icon-size;
|
||||
min-width: $icon-size;
|
||||
height: $icon-size;
|
||||
min-height: $icon-size;
|
||||
@include icon-size();
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
fill: currentColor;
|
||||
text-rendering: optimizeLegibility;
|
||||
vertical-align: middle;
|
||||
|
||||
&.md-size-2x {
|
||||
@include icon-size($icon-size * 2);
|
||||
}
|
||||
|
||||
&.md-size-3x {
|
||||
@include icon-size($icon-size * 3);
|
||||
}
|
||||
|
||||
&.md-size-4x {
|
||||
@include icon-size($icon-size * 4);
|
||||
}
|
||||
|
||||
&.md-size-5x {
|
||||
@include icon-size($icon-size * 5);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
img.md-icon {
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<i class="md-icon material-icons" :class="[themeClass]">
|
||||
<i class="md-icon" :class="[themeClass]" v-html="svgContent" v-if="svgContent"></i>
|
||||
|
||||
<md-image class="md-icon" :class="[themeClass]" :md-src="imageSrc" v-else-if="imageSrc"></md-image>
|
||||
|
||||
<i class="md-icon material-icons" :class="[themeClass]" v-else>
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
|
@ -10,6 +14,68 @@
|
|||
import theme from '../../core/components/mdTheme/mixin';
|
||||
|
||||
export default {
|
||||
mixins: [theme]
|
||||
props: {
|
||||
mdSrc: String
|
||||
},
|
||||
data: () => ({
|
||||
svgContent: null,
|
||||
imageSrc: null
|
||||
}),
|
||||
mixins: [theme],
|
||||
watch: {
|
||||
mdSrc() {
|
||||
this.svgContent = null;
|
||||
this.imageSrc = null;
|
||||
this.checkSrc();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isImage(mimetype) {
|
||||
return mimetype.indexOf('image') >= 0;
|
||||
},
|
||||
isSVG(mimetype) {
|
||||
return mimetype.indexOf('svg') >= 0;
|
||||
},
|
||||
loadSVG() {
|
||||
const request = new XMLHttpRequest();
|
||||
const self = this;
|
||||
|
||||
request.open('GET', this.mdSrc, true);
|
||||
|
||||
request.onload = function() {
|
||||
const mimetype = this.getResponseHeader('content-type');
|
||||
|
||||
if (this.status >= 200 && this.status < 400 && self.isImage(mimetype)) {
|
||||
if (self.isSVG(mimetype)) {
|
||||
self.svgContent = this.response;
|
||||
window.setTimeout(() => {
|
||||
self.$el.children[0].removeAttribute('fill');
|
||||
}, 0);
|
||||
} else {
|
||||
this.loadImage();
|
||||
}
|
||||
} else {
|
||||
console.warn(`The file ${this.mdSrc} is not a valid image.`);
|
||||
}
|
||||
};
|
||||
|
||||
request.send();
|
||||
},
|
||||
loadImage() {
|
||||
this.imageSrc = this.mdSrc;
|
||||
},
|
||||
checkSrc() {
|
||||
if (this.mdSrc) {
|
||||
if (this.mdSrc.indexOf('.svg') >= 0) {
|
||||
this.loadSVG();
|
||||
} else {
|
||||
this.loadImage();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkSrc();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue