图标库新花样：兼收svg和png，一网打尽，搞定你的个性化图标库！

前端

2023-03-21 06:12:53

构建自定义图标库组件：一份循序渐进指南

对于前端开发人员来说，拥有一个可靠的图标库组件至关重要，因为它可以快速、轻松地向应用程序添加视觉元素。在本指南中，我们将一步一步地向您展示如何构建一个可以上传、选择和删除图标的自定义图标库组件。

准备工作

在开始之前，我们需要确保具备以下必备条件：

文本编辑器（如 Visual Studio Code 或 Sublime Text）
命令行界面（如 Git Bash 或 Windows 命令提示符）
前端框架（如 Vue.js、React 或 Angular）
图标库（如 Iconfont 或 Font Awesome）

创建项目

首先，创建一个新的项目目录，并初始化一个新的 npm 包：

mkdir icon-picker
cd icon-picker
npm init -y

安装依赖

接下来，安装必要的依赖项：

npm install vue
npm install vue-cli
npm install axios
npm install vue-router

创建组件

现在，让我们创建图标库组件：

mkdir src
cd src
touch IconPicker.vue

在 IconPicker.vue 文件中，添加以下代码：

<template>
  <div>
    <input type="file" @change="handleFileSelect" multiple>
    <ul>
      <li v-for="icon in icons" :key="icon.id">
        <img :src="icon.src" alt="" @click="handleIconClick(icon)">
        <button @click="handleIconDelete(icon)">×</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      icons: []
    }
  },
  methods: {
    handleFileSelect(e) {
      const files = e.target.files
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const reader = new FileReader()
        reader.onload = () => {
          const icon = {
            id: Date.now(),
            src: reader.result
          }
          this.icons.push(icon)
        }
        reader.readAsDataURL(file)
      }
    },
    handleIconClick(icon) {
      // Do something when an icon is clicked
    },
    handleIconDelete(icon) {
      this.icons = this.icons.filter(i => i.id !== icon.id)
    }
  }
}
</script>

<style>
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>

注册组件

在 main.js 文件中注册组件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import IconPicker from './src/IconPicker.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: IconPicker
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')