DEV Community 👩‍💻👨‍💻

mixbo
mixbo

Posted on

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 :)

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.