Skip to content

Icon 图标

Tu view plus 提供一套通用的图标设置。

使用方法

  • 如果你想和用例一样直接使用,你需要全局注册组件,才能够直接在项目里使用。
  • 若想查看所有的组件,请访问 @tu-view-plus/icons-vue,或者 SVG 图标集合

安装图标

shell
# NPM
$ npm install @tu-view-plus/icons-vue
# Yarn
$ yarn add @tu-view-plus/icons-vue
# pnpm
$ pnpm install @tu-view-plus/icons-vue
# NPM
$ npm install @tu-view-plus/icons-vue
# Yarn
$ yarn add @tu-view-plus/icons-vue
# pnpm
$ pnpm install @tu-view-plus/icons-vue

引入所有图标

从 @tu-view-plus/icons-vue 引入所有图标并全局注册。

ts
// main.ts
import * as TuViewPlusIconsVue from '@tu-view-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(TuViewPlusIconsVue)) {
  app.component(key, component)
}
// main.ts
import * as TuViewPlusIconsVue from '@tu-view-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(TuViewPlusIconsVue)) {
  app.component(key, component)
}

基础用法

可以使用 tu-icon 为svg提供属性。

附带描述信息

利用 prefix 和 suffix 可分别设置图标的前置和后置内容。

设置
搜索

图标集合

System
  • Plus
  • Minus
  • CirclePlus
  • Search
  • Female
  • Male
  • Aim
  • House
  • FullScreen
  • Loading
  • Link
  • Service
  • Pointer
  • Star
  • Notification
  • Connection
  • ChatDotRound
  • Setting
  • Clock
  • Position
  • Discount
  • Odometer
  • ChatSquare
  • ChatRound
  • ChatLineRound
  • ChatLineSquare
  • ChatDotSquare
  • View
  • Hide
  • Unlock
  • Lock
  • RefreshRight
  • RefreshLeft
  • Refresh
  • Bell
  • MuteNotification
  • User
  • Check
  • CircleCheck
  • Warning
  • CircleClose
  • Close
  • PieChart
  • More
  • Compass
  • Filter
  • Switch
  • Select
  • SemiSelect
  • CloseBold
  • EditPen
  • Edit
  • Message
  • MessageBox
  • TurnOff
  • Finished
  • Delete
  • Crop
  • SwitchButton
  • Operation
  • Open
  • Remove
  • ZoomOut
  • ZoomIn
  • InfoFilled
  • CircleCheckFilled
  • SuccessFilled
  • WarningFilled
  • CircleCloseFilled
  • QuestionFilled
  • WarnTriangleFilled
  • UserFilled
  • MoreFilled
  • Tools
  • HomeFilled
  • Menu
  • UploadFilled
  • Avatar
  • HelpFilled
  • Share
  • StarFilled
  • Comment
  • Histogram
  • Grid
  • Promotion
  • DeleteFilled
  • RemoveFilled
  • CirclePlusFilled
Arrow
  • ArrowLeft
  • ArrowUp
  • ArrowRight
  • ArrowDown
  • ArrowLeftBold
  • ArrowUpBold
  • ArrowRightBold
  • ArrowDownBold
  • DArrowRight
  • DArrowLeft
  • Download
  • Upload
  • Top
  • Bottom
  • Back
  • Right
  • TopRight
  • TopLeft
  • BottomRight
  • BottomLeft
  • Sort
  • SortUp
  • SortDown
  • Rank
  • CaretLeft
  • CaretTop
  • CaretRight
  • CaretBottom
  • DCaret
  • Expand
  • Fold
Document
  • DocumentAdd
  • Document
  • Notebook
  • Tickets
  • Memo
  • Collection
  • Postcard
  • ScaleToOriginal
  • SetUp
  • DocumentDelete
  • DocumentChecked
  • DataBoard
  • DataAnalysis
  • CopyDocument
  • FolderChecked
  • Files
  • Folder
  • FolderDelete
  • FolderRemove
  • FolderOpened
  • DocumentCopy
  • DocumentRemove
  • FolderAdd
  • FirstAidKit
  • Reading
  • DataLine
  • Management
  • Checked
  • Ticket
  • Failed
  • TrendCharts
  • List
Media
  • Microphone
  • Mute
  • Mic
  • VideoPause
  • VideoCamera
  • VideoPlay
  • Headset
  • Monitor
  • Film
  • Camera
  • Picture
  • PictureRounded
  • Iphone
  • Cellphone
  • VideoCameraFilled
  • PictureFilled
  • Platform
  • CameraFilled
  • BellFilled
Traffic
  • Location
  • LocationInformation
  • DeleteLocation
  • Coordinate
  • Bicycle
  • OfficeBuilding
  • School
  • Guide
  • AddLocation
  • MapLocation
  • Place
  • LocationFilled
  • Van
Food
  • Watermelon
  • Pear
  • NoSmoking
  • Smoking
  • Mug
  • GobletSquareFull
  • GobletFull
  • KnifeFork
  • Sugar
  • Bowl
  • MilkTea
  • Lollipop
  • Coffee
  • Chicken
  • Dish
  • IceTea
  • ColdDrink
  • CoffeeCup
  • DishDot
  • IceDrink
  • IceCream
  • Dessert
  • IceCreamSquare
  • ForkSpoon
  • IceCreamRound
  • Food
  • HotWater
  • Grape
  • Fries
  • Apple
  • Burger
  • Goblet
  • GobletSquare
  • Orange
  • Cherry
Items
  • Printer
  • Calendar
  • CreditCard
  • Box
  • Money
  • Refrigerator
  • Cpu
  • Football
  • Brush
  • Suitcase
  • SuitcaseLine
  • Umbrella
  • AlarmClock
  • Medal
  • GoldMedal
  • Present
  • Mouse
  • Watch
  • QuartzWatch
  • Magnet
  • Help
  • Soccer
  • ToiletPaper
  • ReadingLamp
  • Paperclip
  • MagicStick
  • Basketball
  • Baseball
  • Coin
  • Goods
  • Sell
  • SoldOut
  • Key
  • ShoppingCart
  • ShoppingCartFull
  • ShoppingTrolley
  • Phone
  • Scissor
  • Handbag
  • ShoppingBag
  • Trophy
  • TrophyBase
  • Stopwatch
  • Timer
  • CollectionTag
  • TakeawayBox
  • PriceTag
  • Wallet
  • Opportunity
  • PhoneFilled
  • WalletFilled
  • GoodsFilled
  • Flag
  • BrushFilled
  • Briefcase
  • Stamp
Weather
  • Sunrise
  • Sunny
  • Ship
  • MostlyCloudy
  • PartlyCloudy
  • Sunset
  • Drizzling
  • Pouring
  • Cloudy
  • Moon
  • MoonNight
  • Lightning