UI Library Starter

# Icon

# Description

The component provides a icon. Now the all icons are drawn for the size 24 by 24 px.

In order to reliably control the icons of the library, add all the icons through this component and reflect in the documentation.

# Connection

<template>
  <section>
    <Icon name="close" />
    <Icon name="bar" />
    <Icon name="search" />
    <Icon name="left" />
    <Icon name="right" />
    <Icon name="down" />
    <Icon name="up" />
  </section>
</template>

# Render

close close
bar bar
search search
left left
right right
down down
up up

# API

# Props

Name Type Description Default
name String Icon name required
fill String: HEX-color, 'currentColor' Icon color 'currentColor'

# Source code

@/src/components/Icon/Icon.vue

<template>
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    class="icon"
    :class="`icon--${name}`"
    :width="`${size}px`"
    :height="`${size}px`"
    :viewBox="viewBox"
    :aria-labelledby="name"
    role="presentation"
  >
    <title :id="name">{{ name }}</title>

    <g :fill="fill">
      <Close v-if="name === 'close'" />
      <Bar v-if="name === 'bar'" />
      <Search v-if="name === 'search'" />
      <Left v-if="name === 'left'" />
      <Right v-if="name === 'right'" />
      <Down v-if="name === 'down'" />
      <Up v-if="name === 'up'" />
    </g>
  </svg>
</template>

<script>
import Close from './Close';
import Bar from './Bar';
import Search from './Search';
import Left from './Left';
import Right from './Right';
import Down from './Down';
import Up from './Up';

export default {
  name: 'Icon',

  props: {
    name: {
      type: String,
      required: true,
    },
    fill: {
      type: String,
      required: false,
      default: 'currentColor',
    },
  },

  components: {
    Close,
    Bar,
    Search,
    Left,
    Right,
    Down,
    Up,
  },

  data() {
    return {
      size: null,
    };
  },

  created() {
    this.size = 24; // can be changed for some icons
  },

  computed: {
    viewBox() {
      return `0 0 ${this.size} ${this.size}`;
    },
  },
};
</script>

<style lang="stylus" scoped>
.icon
  color inherit
</style>

@/src/components/Icon/Close.vue

<template>
  <path d="M19.348,23.642c-0.34,0-0.667-0.136-0.908-0.377l-6.762-6.762L5.56,22.621
	c-0.241,0.242-0.568,0.377-0.909,0.377l0,0c-0.341,0-0.668-0.135-0.909-0.377l-2.685-2.686c-0.502-0.502-0.502-1.315,0-1.818
	L7.175,12L1.057,5.881c-0.502-0.501-0.502-1.315,0-1.817l2.686-2.686C3.983,1.137,4.31,1.002,4.65,1.002S5.318,1.137,5.56,1.378
	l6.118,6.118l6.762-6.761c0.241-0.241,0.568-0.376,0.908-0.376c0.341,0,0.669,0.136,0.909,0.376l2.687,2.687
	c0.241,0.241,0.377,0.567,0.377,0.908s-0.136,0.668-0.377,0.909L16.181,12l6.763,6.762c0.241,0.24,0.377,0.567,0.377,0.908
	s-0.136,0.668-0.377,0.908l-2.687,2.687C20.017,23.506,19.688,23.642,19.348,23.642L19.348,23.642z"/>
</template>

<script>
export default {
  name: 'Close',
};
</script>

← Input →