3.0.1 • Published 3 years ago
em-icon v3.0.1
em-icon
Icon svg asset or font
Install
npm install --save em-icon
Add to project
Global
#stylesheet.css
@font-face{font-family:'Icons';src:url('icon.ttf');}
@font-face{font-family:'IconsMain';src:url('icon-main.ttf');}
Vue.use options
Vue.use(EmIcon,options) | Component | Options |
---|
//Code point data
//./glyphs/icons1.js
export default [
{name: 'icon_name', code_point: 'e001'},
{name: 'icon2_name', code_point: 'e002'}
]
//./glyphs/icons2.js
export default [
{name: 'icon_name', code_point: 'e001'},
{name: 'icon2_name', code_point: 'e002'}
]
//./glyphs/index.js
export { default as Icons1} from './icons'
export { default as Icons2} from './icons2'
// main.js
import EmIcon from "em-icon";
import {Icons,IconsMain} from './glyphs/index'
Vue.use(EmIcon,{
glyphs:[
{font:'Icons',data:Icons},
{font:'IconsMain',data:IconsMain}
]})
Vue.use(EmIcon);
Local Usage
<template>
<div>
<em-icon name="icon_name" />
<em-icon name="icon_name" font="IconsMain" />
</div>
</template>
<script>
export default {
name: 'component.vue',
components: {EmSvg},
}
</script>
Setup
Parameters
Props(Parameter) | Type | Default | Description |
---|---|---|---|
name (required) | String | - | name icon(font) or path(svg) |
font | String | icons | font family name |
height | Number | null | height icon element |
width | Number | null | width icon element |
is-pointer | Boolean | false | pointer event on/off |
as-image | Boolean | false | icon as img |