Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add support for icons without ligatures (#330)

Browse source 
* ignoring a thing

* md-iconset had to become a boolean prop because :class=[themeClass, iconset] have aonther behavior, as can be seen in https://vuejs.org/v2/guide/class-and-style.html#ad

* icon font support proposal

* support for icon fonts without ligatures

* change iconset example
This commit is contained in:
Sombriks 2017-01-12 09:55:39 -03:00 committed by Marcos Moura
parent 7e7bd5bdc9
commit b673a871cd
3 changed files with 47 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
.DS_Store
node_modules/
npm-debug.log
nbproject

41
docs/src/pages/components/Icon.vue
View file

@ -5,7 +5,7 @@
<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>Alternatively you can use your PNG or SVG icons using the <code>md-src</code> property.</p>
<p>The use of font icons without ligatures are suported too, although this approach lacks accessibility support.</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>
@ -47,6 +47,11 @@
<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-row>
<md-table-cell>md-iconset</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The font icon set. Example: <code>md-iconset="fa fa-pencil"</code> for font awesome.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
@ -133,6 +138,40 @@
</div>
</example-box>
<example-box card-title="Font Icons">
<!-- had a few trouble on making webpack accept font awesome and others,
therefore i'm using those cdn's' for the sake of a good example -->
<div slot="demo">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div>
<md-icon md-iconset="fa fa-home"></md-icon>
<md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"></md-icon>
<md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"></md-icon>
<md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"></md-icon>
<hr/>
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div>
<md-icon md-iconset="ion-home"></md-icon>
<md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"></md-icon>
<md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"></md-icon>
<md-icon md-iconset="ion-clock" class="md-size-4x md-warn"></md-icon>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-icon md-iconset="fa fa-home"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"&gt;&lt;/md-icon&gt;
&lt;hr/&gt;
&lt;md-icon md-iconset="ion-home"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"&gt;&lt;/md-icon&gt;
&lt;md-icon md-iconset="ion-clock" class="md-size-4x md-warn"&gt;&lt;/md-icon&gt;
</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>

8
src/components/mdIcon/mdIcon.vue
View file

@ -3,7 +3,7 @@
<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>
<i class="md-icon" :class="[themeClass, mdIconset]" :aria-hidden="!!mdIconset" v-else>
<slot></slot>
</i>
</template>
@ -17,7 +17,11 @@
export default {
props: {
mdSrc: String
mdSrc: String,
mdIconset: {
type: String,
default: 'material-icons'
}
},
data: () => ({
svgContent: null,