justin2018

建议拒绝 时间长了 同事会把这个当成理所当然

要是收钱 同事 跟觉得理所当然了

这是啥模拟器和手柄 😁

有个闲置的手机 想玩玩 Switch😁

### Vue 中优雅使用 SVG

#### 相关文章

在 vue 项目中优雅的使用 Svg - 掘金
https://juejin.cn/post/6844903697999200263

在 vue3+vite 项目中使用 svg - 掘金
https://juejin.cn/post/6932037172178616334

通过 vite-plugin-svg-icons 插件封装 SvgIcon 组件 - 掘金
https://juejin.cn/post/7094060278475653128

---

#### 使用`vite-plugin-svg-icons`插件

##### 安装插件

```shell
// 安装插件
npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

// 如果报错 需要安装“fast-glob”
yarn add fast-glob -D
```

##### 封装 SvgIcon 组件

```javascript
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
<use :xlink:href="iconName" />
</svg>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
name: "SvgIcon",
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
default: "#333",
},
},
setup(props) {
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
console.log(props.name, "props.name");
if (props.name) {
return `svg-icon icon-${props.name}`;
}
return "svg-icon";
});

return {
iconName,
svgClass,
};
},
});
</script>

<style scoped>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
</style>

```



##### 配置插件

```javascript
// 配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
})
],
})

// 配置 main.js
import 'virtual:svg-icons-register'

const app = createApp(App);

app
.component("svg-icon", SvgIcon)
.mount('#app');
```

##### 使用插件

```vue
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import SvgIcon from "./components/SvgIcon.vue";
</script>

<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
<SvgIcon name="tree" />
</template>

<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

```

看 Swift 语法 1 天

实战 SwiftUI 1 天 😁

---

Learn SwiftUI - Kavsoft

https://kavsoft.dev/

别做

让你的朋友当中间人 接单 你来做

不然 到时候 各种麻烦

记得 一个熟人找做企业门户网站

熟人朋友的报价 3w 感觉高了 朋友要挣他钱
外包公司都报价 20w 觉得别人做得网站很高大上 很大气 很专业

熟人选择了外包公司

App 一定要有颜值

买瓶装的就好了 😁

楼主

可以用自己的 VPS 部署后端

在 SimpleLock 自定义自己的服务器地址吗？