vue-create-iconfont v0.0.2-alpha.2

vue-create-iconfont

generate svg icon through iconfont project symbol js url.

Most of the inspiration comes from ant-design-icons.

use

npm i -S vue-create-iconfont

// src/components/Iconfont.ts

import { createIconfont } from 'vue-create-iconfont'
export default createIconfont({

  // iconfont symbol online url
  scriptUrl: '',
})

// some page tsx
import { Component, Vue } from 'vue-property-decorator'
import Iconfont from '@/components/Iconfont'

@Component<Home>({
  components: {
    Iconfont,
  },

  render() {
    return (
      <div>
        <Iconfont name="logo" size={24} />
      </div>
    )
  }
})
export default class Home extends Vue {}

This component has no style, you need to customize:

<script>
// src/components/Iconfont.ts

import { createIconfont } from 'vue-create-iconfont'
export default createIconfont({
  scriptUrl: '',
})
</script>

<style lang="scss">
.iconfont {
  display: inline-block;

  /* fix inline-block height */
  line-height: 0;
}
</style>

You can customize the  return component:

import { createCustomIconfont } from 'vue-create-iconfont'

export default createCustomIconfont({
  scriptUrl: '',

  create(options) {
    return Vue.extend({
      render(h) {
        return h('')
      }
    })
  }
})