amap-weather-icons
v0.0.6
Published
高德天气现象图标组件
Downloads
14
Maintainers
frankponyReadme
amap-weather-icons
Background
由于高德地图 天气查询 API 并没有返回相应的 天气现象 图标，故编写此库方便大家使用。本项目采用 Web Components 编写，支持主流的前端技术框架，感谢 林间风雨 提供的图片资源。
Install
npm install amap-weather-iconsUsage
Web Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>amap-weather-icons</title>
<script src="https://unpkg.com/[email protected]/output/index.js"></script>
</head>
<body>
<amap-weather-icons size="50" icon="暴雪"></amap-weather-icons>
</body>
</html>Vite
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('amap-weather-icons')
}
}
})
]
}Vue
<script setup>
import "amap-weather-icons";
import { ref } from "vue";
const size = ref(50);
const icon = ref("暴雪");
</script>
<template>
<amap-weather-icons :icon="icon" :size="size"></amap-weather-icons>
</template>React
import "amap-weather-icons";
import { useState } from "react";
function App() {
const [size] = useState(50);
const [icon] = useState("暴雪");
return (
<>
<amap-weather-icons size={size} icon={icon}></amap-weather-icons>
</>
);
}
export default App;Svelte
<script>
import "amap-weather-icons";
const size = 50;
const icon = "暴雪";
</script>
<main>
<amap-weather-icons {size} {icon}></amap-weather-icons>
</main>Attributes
| Name | Description | Type | Default | | ---- | ------------------- | ------------- | ------- | | icon | weather phenomena | string | 未知 | | size | SVG width/height px | string/number | 256 |