DEV Community

mixbo
mixbo

Posted on

2 1

Use iconfront to create icon component

Alt Text

How to create icon component with iconfront let show you code simple and clearn

icon.vue

<template>
  <svg
    class="icon iconfont"
    aria-hidden="true"
    :class="name"
    @click="
      () => {
        this.$emit('click')
      }
    "
  >
    <use :xlink:href="`#icon-${name}`"></use>
  </svg>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.icon {
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

Enter fullscreen mode Exit fullscreen mode

demo.vue

<template>
  <div class="container">
    <icon name="add" />
    <icon name="circle" />
  </div>
</template>
<script>
import Icon from './index'
export default {
  components: {
    Icon
  },
  methods: {
    toast() {
      alert('click')
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  width: 24px;
  height: 24px;
  margin: 8px;
}
.hide-right {
  color: $primary;
}
</style>

Enter fullscreen mode Exit fullscreen mode

Download iconfront static files and import to you project, that all.

Hope it can help you :)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)